Flex布局

什么是flex布局

Flex是Flexioble Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

Flex container：flex容器，指定一个盒子作为flex容器，就可以对这个容器里的元素进行一系列的操作，容器的命名一般是xxx-container

Flex item：flex容器中的每一项。

<div class=”div-container”>

<div class=”div-item sub-container”>

<div class=”sub-item”></div>

<div class=”sub-item”></div>

</div>

<div class=”div-item”></div>

</div>

flex容器是可以嵌套的，即：一个元素可以在作为item的同时，也可以作为container

 

 

Container

表示外层容器

flex-direction

设置容器内部元素的排列方向

row：定义排列方向：从左到右

row-reverse：从右到左

column：从上到下

column-reverse：从下到上

 

flex-wrap

设置容器内部元素换行

nowrap：不换行

wrap：换行

Wrap-reverse：反方向换行

 

justify-content

设置元素在主轴上的对齐方式

flex-start：默认，左对齐 或者 上对齐

flex-end：右对齐 或者 下对齐

center：居中对齐

space-between：两端对齐，元素之间等分，剩余部分空白

space-around：两端对齐，剩余空白等分

 

align-items

设置容器中元素在交叉轴上的对齐方式

stretch：默认，当元素的高度没设置，元素的高度会拉伸至容器高度一致

flex-start：在交叉轴上向起点位置对齐

flex-end：在交叉轴上向结束位置对齐

center：居中对齐

 

 

Item   

表示container中的每一项

 

order：设置元素排序规则， 由小到大，默认为0

 

flex-grow：用于设置元素的放大比例，默认为0。如果为0则不放大

 

flex-shrink：控制元素缩小比例

 

flex-basis：设置元素固定或者自动空间的占比

 

align-self：重写align-items父属性