弹性盒模型 flexbox

导读

flexbox背景
基础概念 *（重点）
弹性容器属性 *
弹性项目属性 *

Flexbox背景起源

2017年10月，W3C推荐使用Flexbox模块写布局。

在此之前，布局共有三种：

流动布局
浮动布局
定位布局

以上三种布局的共同点是：基于元素方向

块元素：自上而下
行内元素：自左而右
这三种元素，父元素对于子元素，几乎没有掌控力。

flexbox的目的

为各种显示设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局以及元素之间的空间

核心思想

赋予父元素一种超能力，让父元素具有改变子元素的能力：

改变资源的尺寸
改变子元素的位置
改变子元素的排列
改变子元素之间的空白

flexbox.png

弹性盒模型 - 弹性盒模型它指的是一套CSS属性规则，而不是一个css属性，具体来说，分为两组属性
弹性容器属性
弹性项目属性

弹性容器- 被设置了display：flex的元素被称为弹性容器

弹性项目- 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。

垂直轴 - 弹性项目排列的轴弹性项目沿着垂直轴依次排列，从垂直轴起点，向垂直轴终点排列。

垂直轴 - 垂直与垂直轴的就是垂直轴。多行弹性项目沿垂直轴排列

垂直轴起点 -弹性项目沿垂直轴分布的起始点

垂直轴终点 - 弹性项目沿垂直轴分布的终点

垂直轴起点 - 多行弹性项目沿垂直轴分布的起始点

垂直轴终点 - 多行弹性项目沿垂直轴分布的终点

display

[图片上传失败...(image-2bd34a-1668051088956)]

定义

display属性用于定义弹性盒模型

语法

.container{
    display:flex|inline-flex
}

flex:块级弹性容器
inline-flex：行内块级弹性容器

flex-wrap

[图片上传失败...(image-e36d33-1668051088956)]

flex-wrap用于定义折行方式

语法

.container{
    flex-wrap：nowrap|wrap|wrap-reverse
}

属性值：

nowrap：默认值，不换行，所有弹性项目显示在一行内
wrap：向垂直轴终点换行，弹性项目根据弹性容器的宽度自动换行、
wrap-reverse：向垂直轴起点换行换行

flex-direction

[图片上传失败...(image-e9d3e2-1668051088956)]

定义

用于设置弹性盒模型的垂直轴方向

语法

.container{
    flex-direction：row|row-reverse|column|column-reverse
}

属性：

row：默认值。把垂直轴设置为水平轴，弹性项目从左向右，从上到下排列
row-reverse：把垂直轴设置为水平轴，弹性项目从右向左，从上到下排列
column：把垂直轴设置为纵轴，弹性项目从上到下，从左向右排列
column-reverse：把垂直轴设置为纵轴。弹性项目从下到上，从左到右。

justify-content

[图片上传失败...(image-4742c6-1668051088956)]

定义

用于设置弹性项目的排列方式

语法

.contianer{
    justify-content：flex-start|flex-end|center|space-between|space-around|space-evenly
}

属性值：

flex-start ：弹性项目的首个元素从垂直轴起点向终点排列默认值
flex-end：弹性项目末尾元素从垂直轴终点向起点排列
center ：弹性项目终点元素位置位于垂直轴中心，向起点和终点排列
space-around ：首个及末尾的弹性项目分别与垂直轴起点和终点留有弹性项目之间留白的一半，且均匀的分配弹性项目之间的剩余空间
space-between ：均匀的分配弹性项目之间的剩余空间
space-evenly ：均匀的分配弹性项目包括垂直轴终点和起点之间的剩余空间

align-items

[图片上传失败...(image-c98ea6-1668051088956)]

定义

align-items用于设置沿垂直轴设置对齐方式

语法

.container{
    align-items：flex-start|flex-end|center|
    stretch|baseline
}

flex-start：让弹性项目对齐到垂直轴的起点
flex-end：让弹性项目对齐到垂直轴的终点
center：让弹性项目对齐到垂直轴的中点
stretch：默认值，拉伸子元素到父元素的高度
baseline：让弹性项目对齐到弹性项目的基线

align-content

[图片上传失败...(image-e4e074-1668051088956)]

定义

用于设置弹性项目沿着垂直轴分布方式

语法

.container{
    align-content：normal|flex-start|flex-end|center|stretch|space-between|space-around|space-evenly
}

flex-start ：弹性项目的首个元素从垂直轴起点向终点排列默认值
flex-end：弹性项目末尾元素从垂直轴终点向起点排列
center ：弹性项目终点元素位置位于垂直轴中心，向起点和终点排列
space-around ：首个及末尾的弹性项目分别与垂直轴起点和终点留有弹性项目之间留白的一半，且均匀的分配弹性项目之间的剩余空间
space-between ：均匀的分配弹性项目之间的剩余空间
space-evenly ：均匀的分配弹性项目包括垂直轴终点和起点之间的剩余空间
stretch：拉伸弹性项目默认值？
normal：默认值也拉伸弹性项目

gap

[图片上传失败...(image-e053a9-1668051088956)]

定义

用于工作弹性项目之间的沟、空白

注意：该属性仅控制非边缘弹性项目。

语法

.container{
    gap：10px；
    gap：10px 10px；
}

单行一个值，控制弹性项目之间的水平间距
多行一个值：控制弹性项目之间的水平垂直间距
多个值：第一个值控制水平间距，第二个值控制垂直间距

小趴菜版flexbox