css3伸缩盒模型（二）

学习最大

已于 2024-01-22 15:10:14 修改

阅读量324

点赞数 9

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

于 2024-01-22 15:07:53 首次发布

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

版权

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

3 篇文章 0 订阅

订阅专栏

5.主轴对齐方式

所需属性：justify-content

常用值如下：

1.flex-start 主轴的起始位置。

2.flex-end 主轴的结束位置。

3.center 中间对齐。

4.space-around 项目均匀分布在一行，项目与项目之间的距离是相等的，且是项目边缘的2倍。

5. space-between 项目均匀分布在一行，项目与项目之间的距离是相等的，与项目边缘没有距离

6.space-evenly 项目均匀分布在一行

源码：

<!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: nowrap;
            /* 主轴对齐方式 --主轴的起始位置*/
            /* justify-content: flex-start; */
            /* 主轴对齐方式 --主轴的结束位置*/
            /* justify-content: flex-end; */
            /* 主轴对齐方式 --中间对齐*/
            /* justify-content: center; */
            /*  主轴对齐方式 --项目均匀分布在一行，项目与项目之间的距离是相等的，与项目边缘没有距离*/
            /* justify-content: space-around; */
            /*  主轴对齐方式 --项目均匀分布在一行 */
            justify-content: space-evenly;

        }
        .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>

6.侧轴对齐

（1）一行

所需属性：align-items

常用值如下：

1.flex-start 侧轴的起始位置。

2.flex-end 侧轴的结束位置。

3.center 中间对齐

4.stretch 拉伸到整个父容器，（前提是伸缩项目不能给高度）默认

5.baseline 侧轴对齐方式 --伸缩项目的第一行文字的基线对齐*/

源码：

<!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: nowrap;
            /* 主轴对齐方式 --主轴的起始位置*/
            /* justify-content: flex-start; */
            /* 主轴对齐方式 --主轴的结束位置*/
            /* justify-content: flex-end; */
            /* 主轴对齐方式 --中间对齐*/
            /* justify-content: center; */
            /* 主轴对齐方式 --项目均匀分布在一行，项目与项目之间的距离是相等的，且是项目边缘的2倍 */
            /* justify-content: space-around; */
             /* 主轴对齐方式 --项目均匀分布在一行，项目与项目之间的距离是相等的，与项目边缘没有距离 */
            /* justify-content:space-between ; */
            /*  主轴对齐方式 --项目均匀分布在一行 */
            /* justify-content: space-evenly; */

        }
        .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>

（2）多行

所需属性：align-content

常用值如下：

.flex-start 侧轴的起始位置。