flex弹性盒子 | 易学教程

flex弹性盒子
若需将容器设置为flex容器
首先 div设置为flex容器

div{
display:flex;
}

flex-direction决定子元素的排列方向
1，row 主轴水平方向，子元素从左向右
例

<div class="My">
<div></div>
<div></div>
<div></div>
</div>
.My{
display:flex;
flex-direction:row;
}

row-reverse主轴水平方向，但起点在容器右端

.My{
 flex-direction:row-reverse;
}

column:主轴为垂直方向，起点在容器上沿；

  .My{
   flex-direction:column;
  }

column-reverse 主轴为垂直方向，起点在容器下沿

.My{
 flex-direction:column-reverse;
}

flex-wrap规定若一行放不下，如何换行
默认情况下，容器里面的所有内容都排在一条线上
<1>nowrop(默认)不换行

div{
flex-direction:row;
flex-wrap:nowrop;
}

wrap换行，第一行在上方

div{
flex-diection:row;
flex-wrap:wrap;
}

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

div{
   flex-direction:row;
   flex-wrap:wrap-reverse;
}

flex-flow是flex-direction属性与flex-wrap属性简写形式；默认值为row,nowrop

div{
flex-flow:row,nowrop;
}

justify-content定义在主轴上对齐方式，共5个；
1.flex-start:向主轴起始位置对齐
2.flex-end:向主轴结束位置对齐；
3.conter:居中
4.space-between:若有两个以上项目，则容器主轴的开始与结束位置各一个，
若一个项目，则处于容器中间，若有两个项目，则处于两侧；
5.space-around:每个项目两侧间隔相等，项目之间间隔比项目边框间隔大一倍，若有一个项目，则位于中间

align-items定义在纵轴上对齐方式
1.flex-start:向主轴起始位置对齐
2.flex-end:向主轴结束位置对齐；
3.conter:居中
4.baseline:项目第一行文字基线对齐。
5.stretch:占满整个容器高度，默认值

align-content,多根轴线对齐方式
1.stretch:多行占满整个交叉轴
2.flex-start:与交叉轴起点对齐。
3.flex-end:与交叉轴终点对齐
4.conter：与交叉轴中点对齐
4.space-between:与交叉轴两端对齐，轴线间隔平均分布
5.space-around:每个根轴线两侧间隔相等，轴线之间间隔比轴线与边框间隔大一倍

来源：https://blog.csdn.net/MING23333/article/details/100083368

标签

弹性盒子