弹性布局案例&详解

原创已于 2022-10-02 23:01:50 修改 · 543 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-10-02 22:55:54 首次发布

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS弹性布局，包括弹性布局的概念、示例及主要属性。内容涵盖弹性盒子的构成，主轴与交叉轴的概念，以及作用在父容器上的属性如flex-direction、flex-wrap、flex-flow和align-items，帮助读者掌握弹性布局的使用技巧。

学习目标：弹性布局案列

了解弹性布局
使用弹性布局
仿写案例

一、弹性布局（什么是弹性布局）

弹性盒子
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。
弹性容器：需要添加弹性布局的父元素；
弹性子元素：弹性布局容器中的子元素，也称为项目；
- 主轴（main axis）：在弹性布局中，我们会通过属性的规定水平或垂直方位为主轴【X/Y轴】；
- 交叉抽（cross axis）：垂直与交叉轴的另一条轴（可理解为就是主轴的垂线）

弹性布局示例

在这里插入图片描述

<body>
	<style>
		.box {
			height: 400px;
			background-color: #000;
		}

		.box div {
			/* 使用子代选择器 */
			width: 400px;
			height: 100px;
			background-color: blue;
			/* 设置背景 */
			color: white;
			font-size: 30px;
		}
	</style>
	<div class="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box4">4</div>
		<div class="box5">5</div>
	</div>
</body>

为父元素添加弹性布局

关键代码： display: flex;

<body>
	<style>
		.box {
			display: flex;
			/*将父元素改为弹性容器 flex*/
			height: 400px;
			background-color: #000;
		}

		.box div {
			/* 使用子代选择器 */
			width: 400px;
			height: 100px;
			background-color: blue;
			/* 设置背景 */
			color: white;
			font-size: 30px;
		}
	</style>
	<div class="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box4">4</div>
		<div class="box5">5</div>
	</div>
</body>

运行结果
在这里插入图片描述

二、弹性布局的属性

1. 作用在父容器上的属性

这个表格很重要，不要求背下来，但是一定要多看！多看！多看！

值	描述
flex-direction	指定弹性容器中子元素排列方式
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction和flex-wrap的简写
justify-content	设置弹性盒子元素在主轴（横轴）方向的对其方式
align-items	设置弹性盒子元素在侧轴（纵轴方向的对其方式）
align-content	修改flex-wrap属性的行为，类似于align-items，但不是设置元素对齐，而是设置行对齐

1-1. flex- direction 属性

flex- **direction属性是用来指定弹性容器中子元素排列方式，它决定了主轴的方向。

值	描述
row（默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

在这里插入图片描述

1-2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行还是多行，同时横轴(X轴)的方向决定了新行堆叠的方向。flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行。

值	描述
nowrap（默认值）	当容器宽度不够时，每个项目的会被挤压宽度排在一行
wrap	换行，并且第一行在容器的最上方
wrap-reverse	换行，并且第一行在容器的最下方

I . nowrap（默认值）值

在这里插入图片描述

II . wrap值

wrap 换行，并且第一行在容器的最上方

在这里插入图片描述

III . wrap-reverse值

换行，并且第一行在容器的最下方

在这里插入图片描述

1-3. flex-flow属性

flex-flow是flex-direction和flex-wrap的缩写形式，默认值为： flex-flow：row nowrap；(最常用)

flex-direction：row（默认值）|row-reverse|column|column-reverse；
flex-wrap：nowrap（默认值）|wrap|wrap-reverse；

1-4. justify-content属性

值	描述
flex-start（默认）	子元素位于主轴起点
flex-end	子元素位于主轴终点
centent	居中
space-between	两端对其，项目之间的间隔都相等。（开头和最后的项目，与父容器没有间隔）
space-around	每个项目两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍（开头和最后的与父容器边缘有一定的间隔）

1-5 .align-items属性

设置弹性盒子元素在侧轴（纵轴方向的对其方式）

值	描述
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
centent	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐（文字的高度、字体大小会影响每行的基线）。
strech（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。

GitHug参考文档，点击我