css3 flex 弹性布局

最新推荐文章于 2023-03-26 11:28:27 发布

Yuº

最新推荐文章于 2023-03-26 11:28:27 发布

阅读量354

点赞数

分类专栏： vue web css3 文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_21444067/article/details/120052510

版权

web 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

4 篇文章 1 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

本文介绍了Flex布局的基本属性，如display:flex、justify-content、align-items等，并通过一个实例展示了如何使用这些属性实现元素的水平居中、垂直居中以及自动换行。同时，解释了flex属性的复杂用法，包括flex-grow、flex-shrink和flex-basis的组合。通过示例代码，读者可以更好地理解和应用Flex布局。

摘要由CSDN通过智能技术生成

flex 弹性布局非常强大

主要有以下几个属性

display: flex; 设置该元素为弹性布局盒子
justify-content: center; 水平对齐方式
align-items: center; 垂直对齐方式
flex-direction: row; 设置元素的排列方向(横向或纵向)
flex-wrap: wrap; 设置元素是否自动换行(wrap自动换行 nowrap不换行 wrap-reverse换行且倒序)
flex-flow: row wrap; flex-direction和flex-wrap的简写
flex:0 0 30%; 这个有点复杂，是flex-grow || flex-shrink || flex-basis的简写，flex-grow 当列表元素的总宽度小于父元素的宽度时，元素拉伸多少，0表示不拉伸,1表示自动拉伸填满父元素，flex-shrink 当列表元素的总宽度大于父元素的宽时，缩放多少，0表示不缩放，1表示缩放。flex-basis 这个应该是元素占父元素的百分比。
order 设置子元素的排列顺序，用的少
align-self 貌似是单单设置这一个元素相对于父元素的垂直对齐方式(align-items属性)，用得少

下面是一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 弹性布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            margin: 0 auto;
            background-color: #f1f1f1;
            width: 300px;
            height: 300px;
        }
        ul{
            display: flex;  /* 设置该元素为弹性布局盒子 */
            justify-content: center; /* 该属性是设置元素的水平对齐方式 */
            align-items: center;  /* 该属性是设置元素的垂直对齐方式 */
            flex-flow: row wrap;  /* 该属性是flex-direction和flex-wrap的简写,
            一个表示元素排列方式(横向或者纵向),一个表示元素是否自动换行(wrap自动换行 nowrap不自动换行 wrap-reverse换行且倒序) */
            
        }
        ul li{
            flex:30%;  /* 这个属性应该是设置该元素的宽度相对于父元素的百分比 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column nowrap;
            margin: 5px 1px 0 1px;
            background-color: white;
        }
        .el{
            border-radius: 10px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="a"><div class="el" style="width: 50px;height: 50px;background-color: red;" >元素</div><p class="text" >文字</p></li>
            <li id="b" ><div class="el" style="width: 50px;height: 50px;background-color: rgb(255, 123, 0);" >元素</div><p class="text" >文字</p></li>
            <li id="c" ><div class="el" style="width: 50px;height: 50px;background-color: rgb(255, 238, 0);" >元素</div><p class="text" >文字</p></li>
            <li id="d" ><div class="el" style="width: 50px;height: 50px;background-color: green;" >元素</div><p class="text" >文字</p></li>
            <li id="e" ><div class="el" style="width: 50px;height: 50px;background-color: rgb(0, 255, 255);" >元素</div><p class="text" >文字</p></li>
            <li id="f" ><div class="el" style="width: 50px;height: 50px;background-color: blue;" >元素</div><p class="text" >文字</p></li>
        </ulf
    </divf
f
f/body>
</html>