Flex

Flex全称Flexible Box,称之为弹性布局,可以给一个容器添加display:flex;,就可以形成弹性布局,在弹性布局里,设置float,vertical-align,clear设置无效

弹性布局

1.容器属性

1.flex-direction:设置主轴方向,就是第一张图的main axis,flex容器内的元素排列方式,有四个值

• column: 主轴为垂直方向,从上之下
• column-reverse :主轴从下向上
• row:起点在左边,水平方向,
• row-reverse :起点右边,跟row相反

flex-direction

.flex-container {
    display: flex;
    /*flex-direction: column;*/
    /*flex-direction: column-reverse;*/
    /*flex-direction:row;*/
    flex-direction:row-reverse;
}

2.flex-wrap:当容器宽度比较小的时候,设置如何换行,有三个属性

• nowrap:默认值,不换行,在一行显示

  
  nowrap

• wrap:第一行在上面,然后宽度不够进行换行

  
  wrap

• wrap-reverse:换行，第一行在下方

  
  wrap-reverse

3.flex-flow:这个属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

4.justify-content:设置主轴的对齐方式

• flex-start:默认的对齐方式,跟flex-direction的row效果一样

  
  flex-start

• flex-end:向右侧对齐

  
  flex-end

• center:居中

  
  center

• space-between:两端对齐,剩下的均分

  
  space-between

• space-around:每个间隔相等

  
  space-around

5.align-items:设置交叉轴上如何对齐,交叉轴就是cross axis

• flex-start:上边缘对齐

• flex-end:下边缘对齐

  
  flex-end
• center:中间,同时设置justify-content:center;就实现了垂直居中

• baseline:第一行文字作为基线进行对齐

  
  baseline

• stretch:如果没设置高度,自动会把高度填满

  
  stretch

6.align-content:当有多轴,多行的时候这个属性设置会有效,让他生效最简单的是设置flex-wrap,当然根据对应要求,还可以同时设置justify-ceontent,align-items等属性

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等
• stretch（默认值）：轴线占满整个交叉轴。

flex-wrap:wrap;
justify-content:center;
align-content: center;

居中

2.item的属性

元素的属性有六个
1.order:默认是0,越小越在前

<div class="flex-item" style="order:1; line-height: 100px;">1</div>
<div class="flex-item" style="order:-1;background:cyan;">2</div>
<div class="flex-item" style="order:-2;background:green;">3</div>
<div class="flex-item">4</div>

order

2.flex-grow:设置item放大的比例,如果横向有剩余,flex-grow设置的是对剩余宽度进行等比例分隔,根据flex-grow进行分配

<div class="flex-item" style="flex-grow:1; line-height: 100px;">1</div>
<div class="flex-item" style="flex-grow:1;background:cyan;">2</div>
<div class="flex-item" style="flex-grow:2;background:green;">3</div>
<div class="flex-item" style="flex-grow:1;">4</div>

flex-grow

容器600px,每个item是100px,设置完之后,剩余200px,1,2,4的宽度变成140px,3的宽度变成180px,进行平分,如果没有宽度,就是根据比例进行等比例宽度设置

3.flex-shrink:当宽度小,而且不换行的时候就能设置缩小的比例

<div class="flex-item" style="flex-shrink:1;">1</div>
<div class="flex-item" style="flex-shrink:1;background:cyan;">2</div>
<div class="flex-item" style="flex-shrink:2;background:green;">3</div>
<div class="flex-item" style="flex-shrink:1;">4</div>

flex-shrink

容器宽300px,平分300px,设置完缩小比例,1,2,4宽80px,只有3是60px

4.flex-basis:浏览器根据这个属性，计算主轴是否有多余空间,如果设置的宽度和本身宽度相同,设置没有效果

<div class="flex-item" style=" line-height: 100px;">1</div>
<div class="flex-item" style="flex-basis:200px;background:cyan;">2</div>
<div class="flex-item" style="background:green;">3</div>
<div class="flex-item" style="">4</div>

lex-basis

5.flex:这个属性是flex-grow, flex-shrink 和 flex-basis三个属性的组合
6.align-self:设置属单个属性有与其他项目不一样的对齐方式,值有flex-start | flex-end | center | baseline | stretch

<div class="flex-item" style=" line-height: 100px;">1</div>
<div class="flex-item" style="align-self:flex-end;background:cyan;">2</div>
<div class="flex-item" style="background:green;">3</div>
<div class="flex-item" style="">4</div>

align-self