css3伸缩盒模型（一）

学习最大

已于 2024-01-22 15:09:56 修改

阅读量310

点赞数 11

分类专栏： css补充学习文章标签： css3 前端 css

于 2024-01-20 17:14:10 首次发布

本文链接：https://blog.csdn.net/m0_62583212/article/details/135715913

版权

css补充学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSSFlexbox中的关键概念，如伸缩容器如何工作，子元素成为伸缩项目，以及如何通过flex-direction控制主轴方向和flex-wrap实现换行。通过实例代码展示了如何在实际项目中应用这些特性。

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

1.伸缩容器、伸缩项目

伸缩容器：开启了flex的元素，就是伸缩容器。

伸缩项目：伸缩容器子元素自动成为了伸缩项目。

2.主轴与侧轴

主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。

侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下半边是终点）。

3.主轴方向

属性名：flex-direction

常用值如下：

row：主轴方向水平从左到右--默认值。
row-reverse：主轴方向水平从右到左。
column：主轴方向垂直从上到下。
column-reverse : 主轴方向垂直从下到上。

注意：改变了主轴方向，侧轴方向也随之改变。

代码示例：

<!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>Document</title>
    <style>
        .outer{
            width: 1000px;
            height: 600px;
            background-color: aquamarine;
            margin: 0 auto;
            display: flex;
            /* 默认主轴方向，水平从左往右 */
            /* flex-direction: row; */
            /* 改变主轴方向，水平从右往左 */
            /* flex-direction: row-reverse; */
            /* 改变主轴方向，垂直从上往下 */
            /* flex-direction: column; */
            /* 改变主轴方向，垂直从下往上*/
            flex-direction: column-reverse;

        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
   
</body>
</html>

4.主轴换行方式

属性名：flex-wrap

nowrap ：不换行（默认）。
wrap：自动换行。
wrap-reverse：反向换行。

代码示例：

<!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>Document</title>
    <style>
        .outer{
            width: 1000px;
            height: 600px;
            background-color: aquamarine;
            margin: 0 auto;
            display: flex;
            /* 默认主轴方向，水平从左往右 */
            flex-direction: row;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
            flex-wrap: nowrap;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
    </div>
   
</body>
</html>