发表于: 2021-01-23 19:17:39

1 1005


今天完成的事情:完成了任务七

明天计划的事情:开始任务八

收获:

请解释一下CSS3的Flexbox(弹性盒布局模型)以及适用场景?

一、

①flex是flexible box的缩写,意为“弹性布局”,用于简洁、完整、响应式地实现各种页面布局,给盒模型提供最大的灵活性。直接设置display:flex或者display:inline-flex的元素称为flex容器(flex container),里面的子元素称为flex子项(flex item)。容器默认存在两根轴,水平的主轴(main axis)和交叉轴(cross axis),flex项目默认沿主轴排列。

②flex布局的相关属性分为两拨,一拨作用于flex容器,一拨作用于flex子项

作用于flex容器的属性有:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

作用于flex子项的属性有:order、flex-grow、flex-shrink、flex-basis、flex、align-self

二、作用于flex容器的属性

①flex-direction

flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。

语法如下:flex-direction: row | row-reverse | column | column-reverse;

row 默认值,显示为行。方向为当前文档水平流方向,默认是从左到右。如果设置direction:rtl,则从右到左

row-reverse 显示为行,方向和row相反

column 显示为列,从上到下

column-reverse 显示为列,方向和column属性值相反

②flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示,如果换行,则下面一行是否反方向显示。

语法如下:flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值,表示单行显示,不换行

wrap 宽度不足换行显示

wrap-reverse 宽度不足换行显示,但是是从下向上

③flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写,语法如下:flex-flow: <‘flex-direction’> || <‘flex-wrap’>

举个栗子 flex-flow: row-reverse wrap-reverse;

④justify-content

justify-content属性决定了水平方向子项的对齐分布方式

语法如下:justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

flex-start 默认值,和文档流方向相关,默认表现为左对齐

flex-end 和文档流方向相关,默认表现为右对齐

center 居中对齐

space-between 两端对齐,各个子项间距等宽

space-around 每个flex子项两侧都环绕着等宽的空白间距,视觉上为边缘两侧的空白为中间空白宽度的一半

space-evenly 每个flex子项两侧空白间距完全相等

⑤align-items

align-items指的是flex子项们相对于flex容器在垂直方向上的对齐方式,是顶部对齐,底部对齐,还是拉伸对齐

语法如下:align-items: stretch | flex-start | flex-end | center | baseline;

stretch 默认值,flex子项拉伸

flex-start 默认表现为容器顶部对齐

flex-end 默认表现为容器底部对齐

center 表现为垂直居中对齐

baseline 表现为所有flex子项对相对于flex容器的基线对齐

⑥align-contet

align-content和justift-content相似,一个指水平方向,一个指垂直方向。align-content即是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行,则align-content属性是没有任何效果的。

语法如下:align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

stretch 默认值。每一行flex子元素都等比例拉伸。例如,如果共两行flex子元素,则每一行拉伸高度是50%

flex-start 默认表现为顶部堆砌

flex-end 默认表现为底部堆放

center 表现为整体垂直居中对齐

space-between 表现为上下两行两端对齐。剩下每一行元素等分剩余空间

space-around 每一行元素上下都享有独立不重叠的空白空间

space-evenly 每一行元素都完全上下等

三、作用在flex子项上的属性

①order

我们可以设置order来改变某一个flex子项的排序位置,所有flex子项的默认order属性值是0,因此,如果我们想要某一个flex子项在最前面显示,可以设置比0小的整数,如-1就可以了。

语法:order: <integer>; integer为整数,可以是负数,默认为0

②flex-grow

flex-grow属性中的grow是扩展的意思,扩展的是flex子项所占据的宽度,扩展侵占的空间就是容器内除了元素之外的空白区域。

语法如下:flex-grow: <number>;  可以为小数,默认值为0

flex-grow默认值为0,表示不占用剩余的空白间隙扩展自己的宽度,不支持负数。如果flex-grow大于0,则剩余空间的分配就会发生,规则如下

1.所有剩余空间的总量为1

2.如果只有一个子项设置了flex-grow属性值,且小于1,如0.3,则扩占剩余空间的30%。如果大于等于1,则独享所有剩余空间

3.如果有多个子项设置了flex-grow属性值,且总和小于1,如0.2  0.3,则分别扩占20%和30%。如果总和大于1,则所有剩余空间被占用,分配比例为属性值的比例。如0.2  0.6   0.8,则分别扩占12.5%  37.5%  50%

③flex-shrink

shrink是收缩的意思,flex-shrink主要处理当flex容器空间不足时,单个元素的收缩比例。flex-shrink不支持负值,默认值为1,也就是默认所有子项都会收缩。如果设置为0,则表示不收缩,保持原始的宽度

语法如下:flex-shrink: <number>; 可以为小数,默认为1

规则如下:

1.如果只有一个flex子项设置了flex-shrink:

flex-shrink值小于1,则收缩的尺寸不完全,会有一部分内容溢出flex容器。

flex-shrink值大于等于1,则收缩完全,正好填满flex容器。

2.如果多个flex子项设置了flex-shrink:

flex-shrink值的总和小于1,则收缩的尺寸不完全,每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。

flex-shrink值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和flex-shrink值的比例一样。

④flex-basis

flex-basis定义了在分配剩余空间之前元素的默认大小

语法如下:flex-basis: <length> | auto; 默认为auto

默认为auto,就是自动,设置了width则占据空间就是width

⑤flex

flex属性是flex-grow , flex-shrink , flex-basis的缩写

语法如下:flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

第二个参数和第三个参数是可选的。默认值为0 1 auto,即不扩占,不收缩,占据默认空间

常见的flex:1;即flex-grow值为1,元素扩占相同的空间

flex默认值等同于flex:0 1 auto;

flex:none等同于flex:0 0 auto;

flex:auto等同于flex:1 1 auto;

⑥align-self

align-self指控制某一个单独flex子项的垂直对齐方式,区别不大,语法几乎一样

align-self: auto | flex-start | flex-end | center | baseline | stretch;

唯一区别是多了一个auto(默认值),表示继承flex容器的align-items属性值



返回列表 返回列表
评论

    分享到