Flex 布局

1.Flex 布局的简介

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

任何一个元素都是可以指定为 flex 布局的

display: flex;

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（默认是从左往右）（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

<style>
    * {
      
      
        margin: 0;
        padding: 0;
    }

    .box {
      
      
        /* 任何一个元素都是可以指定为flex布局 */
        /*指定flex布局 这个元素就是flex容器 里面的子元素就是flex项目*/
        display: flex;
        border: 1px solid black;
    }

    .box div {
      
      
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>


<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

2. 容器属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

flex-direction 决定主轴的方向

不去改变主轴方向，默认是从左往右排列

我们改变主轴的方向，去改变项目的排列方向

项目默认沿主轴排列

有4个可选项：

row 默认水平轴

column 设置交叉轴为主轴

row-reverse 水平轴反转

column-reverse 交叉轴反转

.box {
      
      
    display: flex;
    /* 默认值 水平主轴 起点在左 */
    /* flex-direction: row; */
    /* column：垂直主轴 */
    /*flex-direction: column;*/
    /*flex-direction: column-reverse;*/
    /*flex-direction: row;*/
    border: 1px solid black;
}

flex-wrap：flex项目在主轴摆放不下的时候，项目换不换行
- no-warp是默认值，是不换行的，就算是超出父类盒子的大小也不换位，会按照比例缩放元素的宽或高
- warp换行
flex-flow：flex-direction flex-wrap 这两个的缩写，可以同时设置两个值：
- 默认值 flex-flow: row wrap;
justify-content 主轴上的对齐方式
- flex-start 默认值起点对齐左对齐
- flex-end 终点对齐相当于是右对齐
- center 居中显示
- space-between两端对齐（有两个盒子的话就会左边一个右边一个）
- space-around 所有的间隔分配均匀每个盒子的左和右都添加了一个相同的间距
- space-evenly 所有的盒子之间的间隔平均分配
align-items 项目在交叉轴上如何对齐
- stretch 默认值 flex项目没有高度会占满整个容器

3. 项目属性

order 项目的排列顺序。数值越小，排列越靠前，默认为0，调整先后顺序。
flex-grow ：主轴剩余的空间的时候 flex项目元素增大比例默认0不增加（相当于分赃，设置分赃的比例）
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- 如果一个项目的flex-shrink为0 空间不足的时候不会缩小
align-self 允许单个项目有与其他项目不一样的对齐方式
- center 中心对齐
- flex-end 下对齐
- flex-start 上对齐

前端-Flex布局

Flex 布局

1.Flex 布局的简介

2. 容器属性

3. 项目属性

猜你喜欢