搭建移动端布局框架:重拾flex

0x001 概述

---

说起关于flex的文章。我觉得啊除了阮一峰老师，再也无人能出其右了，所以这里也只是聊做记录。

0x002 基本概念

1. Flex container：元素添加了flex属性后就变成了flex容器,
2. Axes ：Flex Container的坐标轴，分为main axes(主轴)和cross axes（交轴）

3. Flex item：父元素一旦添加flex属性，子元素将直接变成flex子元素，将不再显示默认布局,而是沿着Flex container的主轴顺序排列,如果改变主轴方向,则子元素的排列方向也将会改变

   • 默认样式(box定义了一个100*100的盒子，container定义了一个500*100的盒子，bg*只是背景颜色)

    <div class="container ">
       <div class="box bg1"></div>
       <div class="box bg2"></div>
       <div class="box bg3"></div>
    </div>
       

   

   • 父元素添加flex属性

   <div class="container flex">
       <div class="box bg1"></div>
       <div class="box bg2"></div>
       <div class="box bg3"></div>
   </div>

0x003 容器属性

1. 属性简介

   • flex-direction：
   • flex-wrap：
   • flex-flow：
   • justify-content：
   • align-items：
   • align-content：

2. flex-direction:
   这个属性可以改变主轴的方向,子元素沿着主轴排列,所以改变主轴方向将会改变子元素的排列方向

   • 初始值: row

   • 可选值:

     • row ：主轴从main start到main end
     • row-reverse ：主轴从main end到main start
     • column ：主轴从cross start到cross end
     • column-reverse：主轴从cross end到cross start

1. flex-wrap
   默认情况向子元素沿着主轴排列时,如果所有子元素的总大小超过父元素,则子元素将会被压缩,该属性可以改变这种情况,使之在这种情况下换行而不压缩子元素宽度

   • 初始值: nowrap

   • 可选值:

     • nowrap : 不换行
     • wrap : 换行
     • wrap-reverse : 换行并倒序

   ![clipboard.png](/img/bVKrAI)

1. flex-flow
   是flex-direction和flex-wrap的缩写形式

   • 初始值: row nowrap

2. justify-content
   该属性定义了子元素相对父容器的对齐方式

   • 初始值 : flex-start

   • 可选值 :

     • flex-start: 子元素紧靠main start
     • flex-end: 子元素紧靠main end
     • center: 子元素居中对齐
     • space-between: 子元素两侧无边距,等分居中对齐
     • space-around:子元素等分居中对齐

1. align-items
   该属性定义子元素在交轴上的对齐方式

   • 初始值 : stretch

   • 可选值 :

     • flex-start : 子元素相对于cross start对齐
     • flex-end : 子元素相对于cross end对齐
     • center : 子元素相对于cross axes居中对齐
     • baseline : 子元素相对于第一个子元素的基线对齐
     • stretch : 如果子元素未设定高度,则拉伸至容器最大高度

1. align-content
   该属性定义了多条主轴在交轴上的对齐方式

   • 初始值 : stretch

   • 可选值 :

     • flex-start : 多条轴线相对cross start对齐
     • flex-end : 多条轴线相对cross end对齐
     • center : 多条轴线相对cross axes居中对齐
     • space-between : 多条轴线两端无间距,中间等分间距对齐
     • space-around : 多条轴线等分间距对齐
     • stretch : 如果轴线未设定高度,则拉伸至容器最大高度

0x004 子元素属性

1. 属性简介:

   • order
   • align-self
   • flex-grow
   • flex-shrink
   • flex-basis

2. order
   值越小越靠接近main start

   • 初始值 : 0

1. flex-grow
   该属性定义子元素占据剩余空间的比例,数值越大,占据的比例越大

1. align-self
   该属性定义该子元素相对于交轴的对齐方式

   • 初始值 : stretch

   • 可选值 :

     • flex-start : 元素相对于cross start对齐
     • flex-end : 元素相对于cross end对齐
     • center : 元素相对于cross axes居中对齐
     • baseline : 元素相对于第一个子元素的基线对齐
     • stretch : 如果元素未设定高度,则拉伸至容器最大高度

1. flex-shrink
   该属性定义了元素的缩小比例,数值越大,缩小比例越大,0不缩放

1. flex-basis

   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(摘自阮一峰博客原文)

0x004 总结

其实当初看了许多遍阮一峰老师关于flex的博客,但是依旧没有理解.如今自己整理了一遍,发现了当初理解的误区,当初认为,flex-direction让子元素的排序方式改变,但是其flex-directory的作用是让主轴和交轴交换位置.从这个方向理解便可以真正理解flex在不同方向的布局.
也就是我们不能用x轴y轴来理解flex,而是使用主轴和交轴来理解.

0x005 下一篇文章

• 搭建移动端布局框架:整合flex