flex布局

最新推荐文章于 2022-07-07 22:57:55 发布

毛毛虫呜呜

最新推荐文章于 2022-07-07 22:57:55 发布

阅读量211

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43424325/article/details/121268319

版权

flex

父盒子属性：

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列顺序
示例：
本次demo的代码都是在下面代码的基础上加以修改。
初始代码（不给父盒子添加flex属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:800px;
            height: 300px;
            background-color: pink;
        }
        div span{
            width: 150px;
            height:100px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>

效果图
在这里插入图片描述
添加flex属性,在div中加入

 display: flex;

结果
在这里插入图片描述

父盒子属性：

在这里插入图片描述

1、flex-direction

flex-direction设置主轴，容器内的元素会按照主轴排列，默认为row(x轴)，设置了主轴，剩下的就是侧轴。
flex-direction属性值：
row（从左到右排列，默认）
row-reverse（从右到左排列）
column（从上到下排列）
column-reverse（从下到上排列）

2、justify-content

justify-content用于设置主轴上元素排列的方式
前提：使用前一定要确认主轴是哪个方向
属性值
在这里插入图片描述
举例:在div中加入justify-content: space-between

justify-content: space-between;

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

3、flex-wrap

作用：设置子元素是否换行
默认情况下，使用了flex的容器，元素会沿主轴方向一行排列，即使空间不足时，也不会换行。
我们将div中的span个数增加，当span到达一定数量时，div一行将不能全部放下span。
增加span标签前
在这里插入图片描述
增加span标签后

对比两张图发现，为了在一行内显示，我们span的大小被强制修改了。如何解决这种情况，通过设置flex-wrap=wrap可以实现换行。
在div中加入 flex-wrap: wrap
结果如下，当一行不能全部放下时，会自动分行,并且span的大小没有被改变。
在这里插入图片描述

4、align-items（单行）

只适用于单行，多行下无效
属性值：
在这里插入图片描述

当我们以x轴为主轴时，可以通过justify-content: center来改变元素的排列方式，但是只能是在主轴上的改变，并不能改变侧轴.
如下所示：我们设置了主轴为x轴，并且元素的排列方式为居中

justify-content: center;
flex-direction: row;

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

我们的需求是想让紫色元素块在侧轴上也可以居中
在div容器中添加 align-items: center;属性
效果图：
在这里插入图片描述
特别解释：stretch属性值
当我们子元素不设置height或者weight时， align-items: stretch;可以实现沿着侧轴方向拉伸元素（吃出侧轴为y轴，子元素没有设置height）

5、align-content(多行)

只适用于多行，单行下无效
属性值
在这里插入图片描述
在容器div中加入align-content: space-around;

6、flex-flow

flex-flow属性时flex-direction和flex-wrap属性的复合属性
例如：flex-wrap:wrap;
flex-direction:row
可以通过flex-flow合并为一行代码：flex-flow：row wrap；

毛毛虫呜呜

关注

0
点赞
踩
1

收藏

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

flex父盒子属性：1、flex-direction2、justify-content3、flex-wrap4、align-items（单行）5、align-content(多行)6、flex-flow原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列顺序示例：本次demo的代码都是在下面代码的基础上加以修改。初始代码（不给父盒子添加flex属性）<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫