flex布局

&&月弥

于 2024-07-19 13:51:52 发布

阅读量99

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_57714322/article/details/140547358

版权

<!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>
</head>
<style>
    .bod {

        /* 弹性布局 分为主轴和侧轴 */
        display: flex;  
        /* 1. flex_direcion 设置主轴方向 默认x轴，从左往右 */
        /* flex-direction: row-reverse; 从右往左*/
        /* flex-direction: column;  从上到下*/
        /* flex-direction: column-reverse; 从下到上 */

        /* 2. justify-content:设置主轴上的子元素排列方式 */
        /* justify-content: flex-end; 从尾部排序*/
        /* justify-content: center; 居中*/
        /* justify-content: space-around; 平分剩余空间 */
        /* justify-content: space-between; 两边贴边，然后平分中间区域 */

        /* 3. flex-wrap 设置子元素是否换行 */
        flex-wrap: wrap;

        /* 4. align-content: 设置侧轴上的子元素的排列方式（多行） */
        /* align-content: flex-start; 从上到下 */
        /* align-content: flex-end;  从下到上*/
        /* align-content: center; 居中*/
        /* align-content: space-around; 等分 */
        /* align-content: space-between; 两边补齐然后平分*/
        /* align-content: stretch; 拉伸平分父元素高度 子元素不要设置高度*/
        
        /* 5. align-items 设置侧轴上的子元素排列方式(单行)  和多行属性一样*/
        /* align-items: center; */

        /* 6. flex-flow 复合属性 相当于设置了flex-direction flex-wrap */
        flex-flow: column wrap;

        /* 7. align-self 设置单个子元素在侧轴的位置 */
        align-self: center;

        background-color: red;
        width: 300px;
        height: 200px;
        /* overflow: hidden; */
    }
    .sp {
        margin: 10px;
        border: solid 1px;
        width: 80px;
        height: 50px;
    }
</style>
<body>
    <div class="bod">
        <div class="sp">a</div>
        <div class="sp">b</div>
        <div class="sp">c</div>
        <div class="sp">d</div>
        <div class="sp">e</div>
        <div class="sp">f</div>
    </div>
</body>
</html>