CSS-justify-content主轴对齐属性

2019-11-22 本文已影响0人 Kkite

justify-content属性值（水平对齐）

值	描述	白话文
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

html案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        section{
            width: 60%;
            height: 250px;
            border: 2px solid pink;
            margin: 100px auto;
            /*display: flex;*/
            /*justify-content: flex-start;  让子元素从父容器的开头开始排序 但是盒子顺序不变*/ 
            /*justify-content: flex-end;    让子元素从父容器的后面开始排序 但是盒子顺序不变*/
            /*justify-content: center;      让子元素从父容器中间显示*/
            /*justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分配空白间距*/
            /*justify-content: space-around; 相当于给每个盒子添加了左右margin外边距*/
        }
        div{
            width: 250px;
            height: 100%;
        }
        div:first-child{
            background-color: pink;
        }
        div:nth-child(2){
            background-color: purple;
        }
        div:nth-child(3){
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>