flex布局

最新推荐文章于 2023-09-20 11:41:01 发布

wq2714

最新推荐文章于 2023-09-20 11:41:01 发布

阅读量167

点赞数 1

文章标签： css html5 css3

本文链接：https://blog.csdn.net/wq2714/article/details/104600568

版权

flex布局

在H5中，关于PC端的布局有好多种方式，但今天我介绍的是在一维条件下，最适合用于布局的一种，它就是 弹性布局 。弹性布局非常适合于只一维空间的布局，我觉得它有的时候可以代替浮动，而且当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）。
flex布局有好多的属性，有的可以添加在父元素身上，有的可以子元素使用。下面我会稍微列举一下：

添加到父元素身上的：

display : flex;
flex-direction: row; 布局的排列方向（主轴排列方向）有四个值：row 、row-reverse（reverse是颠倒的意思，就是你在一行中它会将后面的显示在前面）、 column、 column-reverse。
flex-wrap : nowrap; 是否进行换行处理。
justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。这常用的有下面几个值： flex-start （子项都去起始位置对齐。） flex-end （子项都去结束位置对齐。） center （子项都去中心位置对齐。） space-between （表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。）
space-around （ around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。） space-evenly （ evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。）
注：在 justify-content中space-between、space-around 、space-evenly会有的比较多一点，非常有利于你布局。
align-items : 每一行中的子元素上下对齐方式。其值有flex-start;center;flex-end;分别对应上中下三个位置。这个在布局中也经常遇到

添加到子元素身上的：

1>. order : 排序
2>. flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
0 : 默认值 , 不去扩展
1 : 去扩展 , 会把空白区域全部沾满
子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。
3>. lex-shrink : 收缩
正常默认值是1
0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

下面我将举个例子来说明一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{ margin:0; padding:0;}
    img{ display: block;}
    a{ text-decoration: none;}
    #nav{ width:100%; height:200px; border-top:1px black solid; border-bottom:1px black solid; display: flex; flex-direction: column;}
    #nav .container{ height:50%; display: flex; justify-content: space-around; align-items: center;}
    #nav .container div{ width:48px; text-align: center;}
    #nav .container div img{ width:48px;}
    #nav .container div p{ margin-top: 10px;} 
    </style>
</head>
<body>
     <div id="nav">
        <div class="container">
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
        </div>
        <div class="container">
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./2.jpg" alt="">
                    <p>逆战班</p>
                </a>
            </div>
        </div>
    </div> 
</body>
</html>

这样应用就可以用来布局，如刚刚这个简单的列表。

下面介绍一个特别常用的布局方式
如何实现一列固定一列自适应：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{margin:0; padding:0;}
    #main{ display: flex;}
    #aside{ width:200px; height:400px; background:red;}
    #detail{ flex-grow: 1; flex: 1; height:400px;  background:blue;}
    </style>
</head>
<body>
    <div id="main">
        <div id="aside"></div>
        <div id="detail"></div>
    </div> 
</body>
</html>

在这里插入图片描述
这样当你改变你屏幕的宽的时候，改变的只是蓝色区域的大小，而红色区域不会发生任何变化。这常用于制作登陆页面之类的。

wq2714

关注

1
点赞
踩
0

收藏

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

flex布局在H5中，关于PC端的布局有好多种方式，但今天我介绍的是在一维条件下，最适合用于布局的一种，它就是弹性布局。弹性布局非常适合于只一维空间的布局，我觉得它有的时候可以代替浮动，而且当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）。flex布局有好多的属性，有的可以添加在父元素身上，有的可以子元素使用。下面我会稍微列举一下：添加到父元素身上的：...
复制链接

扫一扫