css: 弹性盒

目录

一、父元素（容器）属性

1. flex-direction：容器伸缩方向

2. flex-wrap：换行

3.flex-flow：同时设置 flex-direction 和 flex-wrap 属性的简写属性

4.justify-content：主轴对齐， 用来定义伸缩项目沿主轴线的对齐方式

5.align-items：侧轴对齐，伸缩项目行在侧轴上的对齐方式

6.align-content：对齐弹性线，往往要与换行同时应用，没有换行就不存在多行的情况

二、子元素（项目）属性

1.align-self：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items

2. order：显示顺序

3. flex-grow：定义项目的放大比例

4. flex-shrink：定义了项目的缩小比例

5. flex-basis：项目的初始长度

6. flex：flex-grow, flex-shrink 和 flex-basis的简写

三、示例

1. 完美居中

 2. 响应式图片显示

3. 响应式网站显示

四、多列布局

1.columns：简写，column-width 列宽   column-count 列数

2.column-width：每列列宽，类似于最小宽度min-width，auto 自适应；

3.column-count：列数，最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定

4.column-gap：列间距，不能为负数；

5.column-rule：列边框，与定义边框一样：2px dashed #ccc;

6.column-span：定义多列布局中子元素的跨列效果，通常用于标题；

---

flexbox布局：伸缩布局盒模型。使容器能以最佳的方式填充可用空间，适应所有类型的显示设备和屏幕大小。

主轴：当前布局的主要方向，水平或垂直；

侧轴：当前布局方向为水平时—侧轴垂直，当前布局方向为垂直—侧轴水平

display: flex不特殊设置flex-direction时，默认排列方式为从左向右

注意：以下示例中，div的margin上下左右值为10px

一、父元素（容器）属性

1. flex-direction：容器伸缩方向

• row：从左向右；

 

• row-reverse：与row相反， 从右向左；

• column：从上到下；

• column-reverse：与column相反，从下到上；

2. flex-wrap：换行

• nowrap：不换行，默认值，是否超出都不会换行；

• wrap：换行，一旦项目超出容器，就会换行；

• wrap-reverse：反向换行，主轴水平时，上下反向，主轴垂直时，左右反向；

3.flex-flow：同时设置 flex-direction 和 flex-wrap 属性的简写属性

        flex-flow：flex-direction flex-wrap;

        两个值同时定义或者单独定义都生效

4.justify-content：主轴对齐， 用来定义伸缩项目沿主轴线的对齐方式

• flex-start：一行起始位置靠齐；

• flex-end：一行结束位置靠齐；

• center：一行中间位置靠齐；

• space-between：平均分布在行里；

• space-around：平均分布在行里，两端保留一半的空间；

5.align-items：侧轴对齐，伸缩项目行在侧轴上的对齐方式

• flex-start：项目在在侧轴起点边的外边距，紧靠住侧轴起始边；

• flex-end：项目在侧轴终点边的外边距，紧靠住侧轴终点边；

• center：项目的外边距盒，在侧轴上居中放置；

• baseline：伸缩项目根据伸缩项目的基线进行对齐；

• stretch：伸缩项目拉伸填充整个伸缩容器。

 

 

6.align-content：对齐弹性线，往往要与换行同时应用，没有换行就不存在多行的情况

flex-wrap: wrap

• flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）

• flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）

• stretch（默认值）：拉伸弹性线以占据剩余空间；

• center：各行向伸缩容器的中间位置堆叠；（居中没有行距）

• space-between：各行在伸缩容器中平均分布, 显示的弹性线之间有相等的间距（两端对齐，中间自动分配）

• space-around：各行在伸缩容器中平均分布，两端保留一半的空间，显示弹性线在其之前、之间和之后带有空格（自动分配距离）

 

 

二、子元素（项目）属性

1.align-self：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items

• flex-start：伸缩项目在侧轴起点边的外边距，紧靠在侧轴起始边；（元素位于容器的开头）
• flex-end：伸缩项目在侧轴终点边的外边距，紧靠在侧轴终点边；（元素位于容器的结尾）

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

• center：伸缩项目的外边距盒，在侧轴上居中放置；（元素位于容器的中间）

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

• stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）

 

2. order：显示顺序

        默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序，不定义order的伸缩项目会排到前面

<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>

 

3. flex-grow：定义项目的放大比例

• 该值必须是数字，默认为0，即如果存在剩余空间，也不放大；
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间；
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍；

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

 

4. flex-shrink：定义了项目的缩小比例

• 默认为1，即如果空间不足，该项目将缩小；
• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小；
• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小；
• 负值对该属性无效。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

 

5. flex-basis：项目的初始长度

• 默认值为auto，即项目的本来大小
• 设置具体数值后，项目将占据固定空间

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

 

6. flex：flex-grow, flex-shrink 和 flex-basis的简写

• 默认值为0 1 auto

三、示例

1. 完美居中

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

 2. 响应式图片显示

W3School TIY Editorhttps://www.w3school.com.cn/tiy/t.asp?f=css3_flexbox_image_gallery

3. 响应式网站显示

W3School TIY Editorhttps://www.w3school.com.cn/tiy/t.asp?f=css3_flexbox_website

四、多列布局

1.columns：简写，column-width 列宽   column-count 列数

2.column-width：每列列宽，类似于最小宽度min-width，auto 自适应；

3.column-count：列数，最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定

4.column-gap：列间距，不能为负数；

5.column-rule：列边框，与定义边框一样：2px dashed #ccc;

6.column-span：定义多列布局中子元素的跨列效果，通常用于标题；

• none：不跨列；
• all：跨所有列；