flex布局
开启flex功能
<html><head><style>.container{border: 1px solid #000;width: 400px;height: 400px;margin-left: 20px;margin-top: 20px;display: flex; // 开启flex布局}.item{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;font-size: 50px;}.item:nth-of-type(1){background-color: #f00;}.item:nth-of-type(2){background-color: #0f0;}.item:nth-of-type(3){background-color: #00f;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body>
</html>
开启前
开启后
属性介绍
flex-direction
flex items 默认都是沿着main axis(主轴)从main start 到main end 方向排布
flex-direction决定了main axis的方向，有4个取值
row(默认值),row-reverse,column,column-reverse
justify-content
justify-content决定了flex item在主轴上的对齐方式
- flex-start(默认值)：与main start 对齐
- flex-end：与main end 对齐
- center：居中对齐
- space-between：
flex items 之间的距离相等
与main start和main end两端对齐 - space-evenly：
flex items 之间的距离相等
与main start和main end之间的距离等于flex items 之间的距离 - space-around：
flex items 之间的距离相等
与main start和main end之间的距离等于flex items 之间的距离的一半
align-items
align-items决定了flex items在cross axis上的对齐方式
- stretch(默认值)：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
- flex-start：与cross start 对齐
- flex-end：与cross end 对齐
- center：在cross axis 方向上居中对齐
- baseline：与基准线对齐
flex-wrap
flex-wrap 决定了 flex container 是单行还是多行
- nowrap(默认)：单行
- wrap：多行（如果size不够，子item size会被压缩）
- wrap-reverse：多行（对比wrap,cross start与cross end相反）
flex-flow
flex-flow是flex-direction || flex-wrap的缩写
比如：
flex-flow:column wrap 等价于
- flex-direction:column
- flex-wrap:wrap
flex-flow:row-reverse 等价于
- flex-direction:row-reverse
- flex-wrap:nowrap
flex-flow:wrap 等价于
- flex-direction:row
- flex-wrap:wrap
align-content
align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
- stretch(默认值)：与align-items的stretch类似
- flex-start：与cross start 对齐
- flex-end：与cross end 对齐
- 其他属性同justify-content
order
order决定了flex items的排布顺序
- 可以设置任意整数（正整数，负整数，0），值越小就越排在前面
- 默认值是0
align-self
- flex items 可以通过 align-self 覆盖 flex container设置的align-items
- auto（默认值）：遵从flex container的align-items设置
- 其他属性值及效果和align-items一致
flex-grow
flex-grow决定了flex items如何扩展
- 可以设置任意非负数（正整数，正小数，0）默认值是0
- 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
- 如果所有的flex items的flex-grow总和sum超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow / sum
- 如果所有的flex items的flex-grow总和sum不超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow
flex-shrink
flex-grow决定了flex items如何收缩
- 可以设置任意非负数（正整数，正小数，0）默认值是1
- 当flex items在main axis方向上超过flex container的size,flex-shrink属性才会有效
- 每个flex item 收缩的size为 flex items 超出 flex container的size * 收缩比例/所有flex items的收缩比例之和
- 收缩比例 = flex-shrink * flex item的base size(base size是flex item 放入 flex container之前的size)
- flex items 收缩后的最终size不能小于min-width\min-height
flex-basis
flex-basis 用来设置flex items在main axis方向上的base size
- auto(默认值)，content:取决于内容本身的size
- 决定 flex items 最终base size的因素，从优先级高到低：
max-width\max-height\min-width\min-height->flex-basis->width\height->内容本身的size
flex
flex 是 flex-grow flex-shrink || flex-basis 的缩写
