弹性（flex）布局

最新推荐文章于 2024-02-12 22:19:08 发布

离天下之大谱

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq_43679416/article/details/118500924

版权

什么是Flexbox ？

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以：

1、在不同方向排列元素

2、重新排列元素的显示顺序

3、更改元素的对齐方式

4、动态地将元素装入容器

在 Flexbox 模型中，有三个核心概念：
– flex 项，需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向

Flexbox的结构

父容器

设置display：flex属性的则为父容器

作用于父容器的属性有：

排列方向：flex-direction: row | column | row-reverse | column-reverse;

主轴对齐：justify-content: flex-start | flex-end | center | space-between | space-around;

单行沿侧轴对齐：align-items: flex-start | flex-end | center | stretch(默认值，拉伸);

多行排列：flex-wrap：wrap | wrap-reverse

flex-direction:排列方向。默认为水平从左往右

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex</title>
	
<style type="text/css">

#both{width: 800px;height: 800px;
background: gold;display: flex;
flex-direction: column-reverse;}

#son1{width: 250px;height: 250px;
 background: green;}

#son2{width: 250px;height: 250px; 
background: blue;}

#son3{width: 250px;height: 250px
; background: red;}
</style>


</head>
<body>
	<div id="both">
		<div id="son1"></div>
		<div id="son2"></div>
		<div id="son3"></div>
	</div>	
</body>
</html>

更改其中#both中的flex-direction的属性就能实现如下效果

效果

不设置flex-direction

flex-direction: column 使 flex 项垂直排列

flex-direction: column-reverse 垂直排列从下往上

flex-direction: row-reverse 水平排列从右往左

、

主轴对齐

主轴侧轴示意图↓

最低0.47元/天解锁文章

离天下之大谱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
弹性（flex）布局

什么是Flexbox ？Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以：1、在不同方向排列元素2、重新排列元素的显示顺序3、更改元素的对齐方式4、动态地将元素装入容器在 Flexbox 模型中，有三个核心概念：..
复制链接

扫一扫