flex布局justify-content属性

justify-content(在父元素设置)
设置弹性盒子元素在主轴(横轴)的对齐方式。

取值:

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐,后面的元素接着第一个元素进行排列。

flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。

center:整体居中显示。

space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。

space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局justify-content属性</title>
    <style rel="text/stylesheet"> .box { display: -webkit-flex; display: flex; width: 400px; height: 100px; margin: 0; padding: 0; border-radius: 5px; list-style: none; background-color: #eee; } .box li { margin: 5px; padding: 10px; border-radius: 5px; background: #aaa; text-align: center; } #box { -webkit-justify-content: flex-start; justify-content: flex-start; } #box2 { -webkit-justify-content: flex-end; justify-content: flex-end; } #box3 { -webkit-justify-content: center; justify-content: center; } #box4 { -webkit-justify-content: space-between; justify-content: space-between; } #box5 { -webkit-justify-content: space-around; justify-content: space-around; } </style>
</head>
<body>
    <h2>justify-content: flex-start</h2>
    <ul id="box" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: flex-end</h2>
    <ul id="box2" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: center</h2>
    <ul id="box3" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: space-between</h2>
    <ul id="box4" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: space-around</h2>
    <ul id="box5" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
</html>
相关文章
相关标签/搜索