易科-8.17
1.弹性布局
弹性布局主要是为了解决某个元素中其子元素的布局,为布局提供了很大的灵活性
2.弹性布局的5大特点
1> 元素设置弹性容器之后,该元素所有的子元素都变为弹性项目,弹性项目将按照弹性布局的方式排列
2> 元素设置为弹性容器之后,项目的float/clear失效,容器的vertical-align/text-align失效
3>父元素设置了宽高就没有项目根据尺寸变小的效果了
4>默认主轴为x轴,主轴起点在左边,主轴终点在右边
5>交叉轴是永远与主轴方向垂直的一根轴,项目在交叉轴上的对齐方式,称为交叉轴的起点和终点
3.display
1>行内元素2>行内块元素3>块元素4>table5>none
4.设置主轴方向flex-direction
1>row:默认值,主轴是x轴,主轴起点在左端
2>row-reverse:主轴是x轴,主轴起点在右端
3>column:主轴是y轴,主轴起点在顶端
4>column-reverse:主轴是y轴,主轴起点在底端
5.设置项目换行justify-content
1>flex-start
2>flex-end
3>center
4>space-between:两端对齐,两端无空白
5>space-around:项目不写高,占满交叉轴所有空间
近期评论