flex 布局

VIP文章 IT00123

已于 2022-07-26 16:59:08 修改

阅读量412

点赞数

文章标签： html css 前端

于 2022-07-26 16:53:56 首次发布

本文链接：https://blog.csdn.net/IT00123/article/details/125998205

版权

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的排列方式。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。

1.row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

2.column：纵向排列。

3.column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

 <style type="text/css">
            #big{
                width: 500PX;
                height: 300PX;
                background: lightblue;
                margin: auto;
                display: flex;　　　　/*定义为弹性盒子*/
                flex-direction:row;/*设置排列方式*/
            }
            #big div{
                margin-left:5PX ;
                margin-right: 5PX;
                width: 100PX;