弹性布局(flex)从认识到使用让你一看就懂

什么是弹性布局？弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

-Food流油

1189人浏览 · 2024-04-27 09:43:02

-Food流油 · 2024-04-27 09:43:02 发布

文章目录

前言
一、弹性布局的特点
二、如何创建弹性空间
三、父容器(弹性容器)的属性
四、生效在子元素身上的属性

前言

什么是弹性布局？
弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

一、弹性布局的特点

	1. 适应性强，在做不同屏幕分辨率的界面时非常实用
	2. 可以随意按照宽度、比例划分元素的宽高
	3. 可以轻松改变元素的显示顺序
	4. 自适应布局实现快捷，易维护

二、如何创建弹性空间

如果想使用弹性布局，那么，就必须将父元素做成弹性空间，这样，子元素就可以变成弹性盒子！

	display:flex;
	不同浏览器的兼容写法：
	display:-webkit-flex;
	display:-moz-flex; 
	display:-ms-flex;

三、父容器(弹性容器)的属性

1. 确定主轴方向

弹性容器具有主轴和交叉轴。默认情况下，主轴是水平方向，交叉轴是垂直方向。

在弹性容器中，元素按照主轴排列

flex-direction: row | row-reverse | column | column-reverse ;
row 默认值; //主轴是水平方向,交叉轴是垂直方向
row-reverse 反向行是主轴;
column 列做主轴;//主轴是垂直方向,交叉轴是水平方向
column-reverse 反向列做主轴;

2. 主轴方向是否换行

	flex-wrap: nowrap | wrap | wrap-reverse;
	nowrap 默认值(不换行);
	wrap 换行;
	wrap-reverse 反方向换行;

3. 主轴方向的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ;

以下案例：水平方向为主轴，垂直方向为交叉轴，所用浏览器为谷歌浏览器；
flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布。
在这里插入图片描述

flex-end : flex 项从主轴的结束位置（main-end）开始排布
在这里插入图片描述

center: flex 项沿主轴居中排布。
在这里插入图片描述

space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴两端对齐，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。
在这里插入图片描述

space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙。
在这里插入图片描述

space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑）
在这里插入图片描述

4. 交叉轴方向的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch ;

以下案例：水平方向为主轴，垂直方向为交叉轴，所用浏览器为谷歌浏览器；
flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐。
在这里插入图片描述

flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐。
在这里插入图片描述

center: flex 项以交叉轴为中心，居中对齐。
在这里插入图片描述

baseline: flex 项按照他们的文字基线对齐。
在这里插入图片描述

stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。
示例：没有定义flex项的高度属性
在这里插入图片描述

5. 如何分配交叉轴的剩余空间

此属性只有在交叉轴有多条内容时才生效
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

以下案例：水平方向为主轴，垂直方向为交叉轴，所用浏览器为谷歌浏览器；
flex-start：多行在容器的交叉轴开始位置排布;
在这里插入图片描述

flex-end：多行在容器的结束位置排布;
在这里插入图片描述

center：多行在容器的中间位置排布;
在这里插入图片描述

space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置;
在这里插入图片描述

space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
在这里插入图片描述
space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等;

stretch（默认值）：占满整个交叉轴。前提不设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性；
此案例为flex项未设置高度时：
在这里插入图片描述

四、生效在子元素身上的属性

以下案例：水平方向为主轴，垂直方向为交叉轴，所用浏览器为谷歌浏览器；

order 排序，值越小，排名越靠前，默认值是0；

<style>
	.list li:nth-child(3){
            order: -1;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	    </ul>
	</div>
</body>

效果：
在这里插入图片描述

flex-grow: 定义子元素的放大比例; 默认值是0，不放大！

<style>
	.list li:nth-child(3){
            flex-grow: 1;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	    </ul>
	</div>
</body>

效果:
在这里插入图片描述

flex-shrink: 1; 定义元素在不换行情况下主轴占不下时的缩小比例，默认值是1，表示等比缩小！

<style>
	.list li:nth-child(3){
            flex-shrink: 4;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	        <li>5</li>
            <li>6</li>
	    </ul>
	</div>
</body>

效果：
在这里插入图片描述

flex: flex-grow flex-shrink flex-basis;
默认: 0 1 auto;
经常会用到的两个书写方式：
flex: auto | none;
auto: 1 1 auto; 开启子选项的放大行为
示例：

<style>
	.list li:nth-child(3){
        flex: auto;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	    </ul>
	</div>
</body>

效果:
在这里插入图片描述

none: 0 0 auto; 关闭子选项的缩小行为
示例：

<style>
	.list li:nth-child(3){
      flex: none;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	    </ul>
	</div>
</body>

效果：
在这里插入图片描述

align-self: 他的值跟align-items的值一模一样，只是，此属性是设置某一个元素的交叉轴对齐方式；

<style>
	.list li:nth-child(3){
        align-self: flex-end;
    }
</style>
<body>
	<div class="box">
	   <ul class="list">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	    </ul>
	</div>
</body>