弹性盒学习笔记

最新推荐文章于 2024-07-16 20:51:21 发布

FLEX_WRAP

最新推荐文章于 2024-07-16 20:51:21 发布

阅读量153

点赞数 1

文章标签： flex css html

本文链接：https://blog.csdn.net/FLEX_WRAP/article/details/107881025

版权

新人小白一枚,记录学习的一天
部分弹性盒

弹性盒

很重要,写在前面
一定要在父元素上定义弹性盒
定义弹性盒之后默认一行显示,要修改默认格式进行换行
设置reverse属性值后对齐方式也会改变,上下互换和左右互换

<style>
        .a{
            width: 800px;
            height: 400px;
            background-color: #eee;
            /* 父元素定义弹性盒 */
            display:flex;
            /* display: -webkit-flex;   兼容性写法,写在属性值前面
            display: -o-flex; */
            /* 定义主轴方向  */
            /* column 上下排列  column-reverse 下-上 */
            flex-direction:column;
            /* row 左右排列  row-reverse 右-左 */
            flex-direction:row;
            /* 设置主轴对齐方式 */
            justify-content:center;
            /* justify-content: flex-start;   上端对齐
            justify-content: flex-end; 底部对齐 */
            /* 两端对齐 */
            justify-content: space-between;
            /* 两端对齐且两端有间距 */
            justify-content: space-around;

            /* 侧轴对齐方式  就是垂直方向的对齐*/
            align-items:center;
            /* align-items:flex-start;
            align-items:flex-end; */

            /* 当子元素超出父元素之后换行 */
            flex-wrap:wrap;
            /* 换行后反方向 */
            flex-wrap:wrap-reverse;
        }
        .a div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a4">4</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a4">4</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a4">4</div>
    </div>
</body>

使用步骤
- 定义弹性盒 display:flex ;
- 确定主轴方向 flex-direction:row/column/row-reverse/column-reverse;
- 主轴对齐方式 justify-content:flex-start/flex-end/center/space-around/space-between
- 侧轴对齐方式 align-items:flex-start/flex-end/center
- 子元素超出时是否换行 flex-wrap:wrap/nowrap

FLEX_WRAP

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性盒学习笔记

新人小白一枚,记录学习的一天部分弹性盒弹性盒很重要,写在前面一定要在父元素上定义弹性盒定义弹性盒之后默认一行显示,要修改默认格式进行换行设置reverse属性值后对齐方式也会改变,上下互换和左右互换<style> .a{ width: 800px; height: 400px; background-color: #eee; /* 父元素定义弹性盒 */
复制链接

扫一扫