易科-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:项目不写高,占满交叉轴所有空间

评论