Flexbox的布局方式主要分为两个角色
- Flex Container(Flex 容器)
- Flex Item (Flex 项目)
Flex Container
属性一:flex-direction是用来定义里面flex items的排序方向
- 预设值是row,横向
- 将它改为column,即是纵向的意思
- row-reserve、column-reserve 翻转
- main-axis(主轴),flex-direction是row时为row,是column为column
- cross-axis(交叉轴),flex-direction是row时为column,是column时为row
- justfy-content是设定主轴的排序方向
- center、flex-star、flex-end
- 方向是根据flex-direction的设定值决定的,所以不能用top、bottom、left、right
- 主轴是row-reserve时,justfy-content:flex-stat就是由右至左
- 主轴是column时,justfy-content:flex-stat就是由上至下
- align-items是设定交叉轴的排序方向
- center、flex-star、flex-end
属性二:flex-wrap指是否分行
- 预设值是nowrap,自动将items的宽度缩小
- 改为warp、超出的部分会自动换行,并且可以调整justfy-content、align-items会有不同的对齐效果
属性三:flex-flow是flex-direction和flex-wrap的组合
- flex-flow:row wrap
属性四:align-content,当flex-wrap的值是wrap,且有多于一行flex-items时才会生效,用来设定行与行之间的对齐方式
- center、flex-star、flex-end、initial、space-arpund(item左右都有相同的空间隔开)、space-evenly、(item之间都有相同的间距)space-between(取消了container最左和最右的空间)
Flex Item
属性一:order,可将个别fiex -item的位置改变
- flex item order属性的预设值是0
- 排序是根绝order由小至大排列的,小的数字排先,大的数字排后
- 例如5个box,将其中一个boder设为1,则排到最后,将其中一个boder设为-1,则排到最前
属性二:align-self
- 用于【覆写】flex container的align-items
- center、flex-star、flex-end
属性三:flex-basis
- 设定flex item主轴方向的基础大小
- 主轴是row时相当于设置flex item的宽度,column相当于设置flex item的高度
- 0时flex item大小为本身内容的大小(例如字母size大小)
- auto代表按照本身box的大小去计算
属性四:flex-grow(扩大比例)
- 当flex container主轴方向有剩余空间时,flex item沿主轴方向扩大的设定
- flex-grow:1 表示各自占有剩余空间的一份,例如主轴是row,小div各60px,大div300px,那么他们会平摊剩余120px,宽度铺满大div,0则表示保持原有大小不变
属性五:flex-shrink(缩小比例),与flex-grow相反
- 指当flex item 主轴方向的大小总和超出flex container时,flex item沿主轴方向怎么缩小
- 预设值是1,各自分担一份被缩小的空间,不会超出container
- folex-shrink:0 当主轴方向空间不足时,都不能缩小对应的flex item
属性六:flex(flex-grow+flex-shrink+flex-basis)
- flex:0 1 150px,代表每一个flex item宽度最多为150px,只会因为flex container空间不足而缩小,不会因为有剩余空间而扩大
- flex:0 0 200px,固定每个flex item大小为200px,不缩小也不扩大