对于弹性盒子的基础知识点

Posted 2021-11-28 wj000

flex(弹性)布局：********

以往的网页布局(layout)方式：

方式：基于盒模型，依赖display属性+margin属性+position属性+float属性。特殊布局比较麻烦(比如元素的垂直居中)

2009年w3c推出flex布局。可以简便、完整，响应式的实现网页布局(IE10以上支持)。任何元素都可以使用

一、flex是什么？

flex：flexible box 弹性布局(可以给盒子提供最大的灵活性)

任何容器都可以指定为flex布局

.box{display:flex;}

webkit内核：加浏览器私有前缀 -webkit前缀

.box{display:-webkit-flex;display:flex;}

注意：给盒子设置flex属性之后，资源的float/clear/vertical-align将失效

二、基本概念

2.1：采用flex布局的元素，称为flex容器(flex container)称为容器。他的所有子元素自动成为容器的成员，称为flex项目(flex item)。

2.2：容器默认存在两根轴:水平方向主轴(main axis)和垂直交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start 结束位置交mainend。交叉轴的开始叫做cross start 结束叫做cross end;

2.3：项目(flex item)默认延主轴排列。单个项目(flex item)所占据的主轴空间叫做main size，所占据的交叉轴空间叫做cross size

三、容器属性(6个)

3.1：flex-direction属性：(决定主轴的方向：即项目的排列方向)

语法：.box{flex-direction: row | row-reverse | column | column-reverse}

4个默认值：

row(默认)：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上端

column-reverse：主轴为垂直方向，起点在下端

3.2：flex-wrap：默认情况，项目都是排在一条线(轴线)上。而flex-wrap属性定义：如果一条线排不下，将如何换行

语法：.box{flex-wrap: nowrap | wrap wrap-reverse}

3个默认值：

nowrap(默认)：不换行

wrap：换行,第一行在上方

wrap-reverse：换行第一行在下方

3.3：flex-flow：是flex-direction和flex-wrap属性的简写形式。默认值为：row nowrap;

语法：.box{flex-flow: flex-direction | flex-wrap}

3.4：justify-content：定义项目在主轴上的对齐方式

语法：.box{justify-content: flex-start | flex-end | center | space-between | space-around}

5个默认值(假设方向自左向右 row 只跟主轴相关)：

flex-start：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐项目之间的间隔相等

space-around：每个项目两侧间隔相等。项目之间的间隔比项目与盒子边框的间隔大一倍

space-evenly：中间间隔全部相等

3.5：align-items：定义项目在交叉轴上的对齐方式(只跟交叉轴方向相关 默认自上而下)

语法：.box{align-items: flex-start | flex-end | center | baseline | strech}

5个默认值：

flex-start：交叉轴起点对齐

flex-end：交叉轴终点对齐

center：交叉轴中点对齐

baseline：项目中第一行文字的基线对齐

strech(默认)：如果项目未设置高度或设置为auto，将沾满整个容器的高度

3.6：align-content：定义多根轴线的对齐方式，如果只有一根轴线该属性不起作用

语法：.box{align-content: flex-start | flex-end | center | space-between | space-around | stretch}

6个默认值：

flex-start：与交叉轴起点对齐

flex-end：与交叉轴终点对齐

center：与交叉轴中心点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：与交叉轴两侧的间隔相等，所以轴线之间的间隔是轴线与盒子边框间隔的两倍

stretch(默认值)：轴线沾满整个交叉轴

四、项目(flex item)属性

4.1：order：定义项目的排列顺序(数值越小越靠前[主轴开始的方向],默认为0)

语法：.item{order: number;}

4.2：flex-grow：定义项目的放大比例.默认为0.如果存在剩余空间也不放大。

语法：.item{flex-grow: number;}

4.3：flex-shrink：定义项目的缩小比例。默认值为1，如果空间不足该项目将缩小

语法：.item{flex-shrink: number;}

4.4：flex-basis:定义在分配多余空间之前，项目所占的主轴空间(main size).浏览器根据这个属性，计算主轴是否有多余的空间。默认为auto，即项目本来大小。

语法：.item{flex-basis: length(200px或者auto);}

4.5：flex：是flex-grow,flex-shrink,flex-basis简写。默认值：0 1 auto;

flex: auto;(相当于1 1 auto;)

flex: none;(相当于0 0 auto;)

4.6：align-self:定义单个项目与其他项目不一样的对齐方式。可以覆盖align-items。默认值是auto，表示继承父元素的align-items属性。如果没有父元素等同于stretch

语法：.item{align-self: auto | flex-start | flex-end | center | basline | stretch}