1.Flex布局
flex容器属性
flex-direction 主轴方向(默认row)
flex-wrap 子项是否可换行
flex-flow:flex-direction与flex-wrap的合写
justify-content 主轴对齐方式
align-items 侧轴(默认column)对齐方式
align-content 弹性线对齐方式(当子项目足够多,一个主轴放不下,wrap产生了多条主轴,弹性线即为每个主轴)
在flexbox容器中,开启flex布局
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.flex-container{
display: flex;
}
.flex-container div{
margin: 10px;
}
// 这时候效果类似'float: left'
1.1 flex-direction
主轴方向,可选值:
column:从上到下
row:从左到右(默认)
column-reverse:从下到上
row-reverse:从右到左
1.2 flex-wrap
可选值:
wrap
nowrap
wrap-reverse: 反方向换行
1.3 flex-flow
direction与wrap的合写
flex-flow: [direction] [wrap]
1.4 justify-content
主轴对齐方式,可选值:
center: 居中对齐
flex-start: 开头对齐(默认)
flex-end: 末端对齐
space-around: 子项之间,以及主轴两端都均分空隙
space-between:仅子项之间均分空隙
1.5 align-items
侧轴对齐方式,可选值:
center
flex-start
flex-end
strech: 拉伸子项在侧轴方向的长度以填充容器(默认)
baseline: 子项基线对齐
1.6 align-content
弹性线对齐方式,可选值:
space-between
space-around
flex-start
flex-end
strech:默认值
2. flexItem
属性:
order 通过值大小指定子项的排列顺序
flex-grow 通过值大小指定当前子项相对其他子项将增长多少
flex-shrink 通过值大小指定当前子项相对其他子项将收缩多少
flex-basis 规定子项的初始长度
flex 即grow、shrink、basis的合写
align-self 规定弹性容器内所选项目的对齐方式,将覆盖容器的 align-items 属性所设置的默认对齐方式
2.1 order
规定item的排列顺序
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
// 顺序:4 2 1 3
2.2 flex-grow
规定item的空间占比
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div>
// 按flex-container可分配的宽度分配
// 1占 1/6 width 2占 1/6 width 3占 4/6 width
2.3 flex-shrink
规定item的缩小占比
<div class="flex-container">
<div>1</div>
<div style="flex-shrink: 0">2</div>
<div>3</div>
</div>
// flex-container宽度变小时,2的宽度不变
2.4 flex-basis
规则item的初始宽度
<div class="flex-container">
<div>1</div>
<div style="flex-basis: 50px">2</div>
<div>3