HTML5基础加强css样式篇（伸缩容器介绍和横轴对其属性 justify-content）（五十二）

最新推荐文章于 2024-03-08 09:02:48 发布

咸鸭蛋炒饭

最新推荐文章于 2024-03-08 09:02:48 发布

阅读量2k

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 css3 html

本文链接：https://blog.csdn.net/u010853130/article/details/70597805

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.伸缩盒模型属性简介：

(1) 容器默认存在两根轴：

①水平的主轴（main axis）和垂直的交叉轴（cross axis）。

②主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。

③交叉轴的开始位置叫做cross start，结束位置叫做cross end。
④默认沿主轴排列。

⑤单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.justify-content：flex-start || flex-end || center || space-between || space-around

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .layout-box {
            width: 600px;
            height: 300px;
            background-color: #f0f0f0;
            /*声明一个元素为伸缩盒模型，伸缩容器
                 1.伸缩项目 沿主轴排列（start -> end）
                 2.所有的伸缩项目（子元素）与父元素等高。
                 3.伸缩项目自动升级为块元素。

             */

            display: flex;

            /*伸缩项目沿主轴对齐

                默认 justify-content: flex-start; 在主轴的 start 处
            */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;

            /*伸缩项目沿主轴 “均匀分布”*/
            /*伸缩项目包裹剩余空间*/
            justify-content: space-between;
            /*剩余空间包裹伸缩项目*/
            justify-content: space-around;



        }

        .item { }

        .item1 { background-color: #f00;}
        .item2 { background-color: #ff0; }
        .item3 { background-color: #00f;}
        .item4 { background-color: #f0f;}


    </style>
</head>
<body>

<div class="layout-box">
    <div class="item item1">1</div>
    <div class="item item2">222</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>


<script type="text/javascript">
</script>
</body>
</html>

justify-content:flex-start:默认效果：

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

咸鸭蛋炒饭

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（伸缩容器介绍和横轴对其属性 justify-content）（五十二）

1.伸缩盒模型属性简介：(1) 容器默认存在两根轴：①水平的主轴（main axis）和垂直的交叉轴（cross axis）。②主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。③交叉轴的开始位置叫做cross start，结束位置叫做cross end。④默认沿主轴排列。⑤单个项目占据的主轴空间叫做main size，占据的交叉轴空间
复制链接

扫一扫