flex包含的5种属性

1.flex-direction:元素排列方向(作用于父元素)
2.justify-conten:横轴元素的排列方式(作用于父元素)
3.align-items:纵轴元素的排列方式(作用于父元素)
4.flex-grow:放大比例(作用于子元素)
5.flex:自动|继承父元素|初始大小|(作用于子元素)

flex-direction的用法

flex-direction:row | column | row-revese |column-reverse
1.row:横向排列(左到右)
2.column:纵向排列(上到下)
3.row-revese:横向反排列(右到左)
4.column-reverse:纵向范排列(下到上)

justify-content的用法

justify-conten:flex-start | flex-end |center |space-around |space-between

flex-start:元素紧凑左对齐
flex-end:元素紧凑右对齐
center:元素紧凑居中对齐
space-around:所有元素平均分中间区域
space-between:除了第一个元素和最后一个元素,其他元素平均分剩余区域(中间区域)

align-items的用法:

align-items:flex-start | flex-end | center | baseline | stretch

align-items: 弹性容器内沿着纵轴(作用于父容器)
flex-start:顶端对齐
flex-end:底端对齐
center:纵向居中对齐
baseline:沿着文字的基线对齐
stretch:拉伸对齐

flex-grow用法

1.理解为放大子元素
用法:flex-grow: ’ number ’

flex的用法(简单)

1)带一个参数
a)无单位,这个数被认为是 felx-grow(放大)的值
b)有单位,这个数被认为是 flex-basis(基本宽度的)值(单独写到对应的元素上)
c)auto(自动宽度)|intial(初始宽度)|none(没有宽度)

演示代码:

style样式代码:

 <style>
        #root {
    
    
            width: 100%;
            display: flex;
            //设置浮动元素的方向
            flex-direction: row;
            //设置排列方式(横轴)
            justify-content: space-around;
        }
        
        .root_item {
    
    
            background-color: aqua;
            width: 100px;
            height: 40px;
            /* flex: auto 等价于 flex:1 */
            /* flex: auto; */
            /* 不带单位相当于是flex-grow :1 */
            /*   flex: 1; */
        }
    </style>

Dom结构代码:

<body>

    <div id="root">
        <div class="root_item">left</div>
        <div class="root_item">center</div>
        <div class="root_item">right</div>
    </div>
</body>

flex布局的简单用法 2021-09-01

复习Flex布局的用法