flex布局

1、认识flex布局#

flex布局是目前web开发中使用最多的布局方案：

flex布局（又称为 Flexible布局，弹性布局）

目前在移动端使用的最多，在pc端也越来越普及

两个重要的概念

开启flex布局的元素叫做 flex container

flex container里面的直接子元素叫做 flex items

设置元素的display属性为flex或者inline-flex可以称为flex container

flex：flex-container为块级元素

inline-flex：flex-container为行内元素

2、认识flex的布局模型#

main axis : 主轴

main start : 主轴起始位置

main end：主轴结束位置

main size：主轴大小

cross axis： 交叉轴

cross start : 交叉轴起始位置

cross end：交叉轴结束位置

cross size：交叉轴大小

3、flex-container属性#

1）flex direction#

flex items默认是沿着main axis（主轴）从main start 开始往 main end 方向排布

flex direction决定了main axis的方向，有四个取值

① row 从左到右

② row-reverse 从右到左

③ column 从上到下

④ column-reverse 从下到上

2）justify-content#

ustify-content 决定了flex-item在main axis上的对齐方式

flex-start：（默认值）与main start 对齐

flex-end：与main end 对齐

center : 居中对齐

space-between:

space-evenly: flex items之间的距离都是相等的

space-around: 首尾间距是中间间距的一半

3）align-items属性#

align-items决定了flex items在cross axis(交叉轴)上的对齐方式

normal：在弹性布局中，效果和stretch一样

stretch：当flex items在cross axis方向的size为auto时，也就是没有设置高度，会自动拉伸至填充flex container

flex-start：与cross start 对齐

flex-end：与cross-end 对齐

center：居中对齐（在交叉轴的中心点对齐）

baseline：与基准线对齐（基线：文字x的底部）

4）flex-wrap属性#

默认情况下，所有的flex items都会在同一行显示，如果放不下，会对flex items进行压缩

nowrap：不换行

wrap: 换行

wrap-reverse: 在交叉轴上做了一个反转

5）flex-flow属性#

flex-flow是 flex-direction || flex -wrap的简写

例如：flex-flow : row-reverse wrap

6）align-content属性#

align-content 决定了多行flex-items在cros axis(交叉轴上的对齐方式)，用法和justify-content

类似

4、flex-items属性#

1）order属性#

order决定了flex items的排布顺序

可以设置任意整数（正整数，负整数，0），值越小，越排在前面

默认值是0

2）align-self #

flex items 可以通过align-self覆盖flex-container设置的align-items

3) flex-grow#

flex-grow 决定了flex items如何扩展

可以设定任意非负数字（正小数，正整数，0），默认是0

当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

如果所有flex items的flex-grow总和sum超过1，每个flex items扩展的size为

flex container 的剩余size* (flex item的flex-grow/sum)

如果所有flex items的flex-grow不超过1，每个flex item扩展的size为

flex container 的剩余size*flex-grow

4）flex-shrink属性#

5）flex-basis#

flex-basis用来设置flex items在main axis方向上的base size

auto：默认值

具体的宽度值： 100px

6）flex属性#

flex是flex-grow||flex-shrink||flex-basis的简写，flex可以指定1个，2个，3个值