Flex布局轻松上手

Posted 2022-12-14 番茄红了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flex布局轻松上手相关的知识，希望对你有一定的参考价值。

布局原理

弹性布局，任何一个容器都可以指定为flex布局，为盒状模型提供最大的灵活性。
父盒子添加flex属性，子盒子中的float,clear,veritcal-align属性失效，子容器可以横向/竖向排列
采用flec布局的元素成为flex元素(flex container）–容器。子元素自动成为容器成员，成为flex项目

父项属性

属性	属性说明
flex-direction	设置主轴方向
justify-content	主轴上子元素的排列方式
flex-wrap	子元素是否换行
align-content	侧轴上的子元素排列方式-多行
align-items	侧轴上子元素排列方式-单行
flex-flow	flex-direction+flex-wrap

主轴与侧轴

带入我们常说的x轴y轴即可
默认主轴的方向是x轴方向（横向），同理，侧轴默认为y轴（竖向）。主轴和侧轴可以通过flex-direction更改

flex-direction–设置主轴方向

主轴和侧轴会发生变化，flex-direction设置的是主轴，另外一项自动归为侧轴，子元素跟随主轴排列

属性	说明
row	左–右
row-reverse	右–左
column	上–下
column-reverse	下–上

总的来说就是横竖及反转。
示例

默认主轴效果：
row-reverse：
column:
column-reverse:
代码:

依次替换flex-direction属性即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 步骤：
        1.父盒子设置flex属性
        2.在父盒子上添加设置主轴方向即可 */
        div
            /* 1.设置父盒子的flex属性 */
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;
            /* 2.选择父盒子的主轴方向 */
            /* 右到左 */
            flex-direction:row-reverse;  
            /* 竖向 */
            flex-direction: column; 
            /* 下到上 */
            flex-direction: column-reverse;

        
       div span
            width:100px;
            height: 100px;
            background-color: papayawhip;
        
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

justify-content–主轴上的子元素排列

属性	说明
flex-start	头部开始
flex-end	尾部开始
center	主轴居中
space-around	平分剩余空间
space-between	贴两侧后平分剩余空间

示例

lex-start:：
flex-end：
center:
spece-around:
space-between:

flex-wrap–子元素是否换行

指定flex元素单行显示还是多行显示。允许换行，该属性允许控制行的堆叠方向，默认不换行

属性	说明
nowrap	默认值，不换行
wrap	换行

为什么会出现子元素换行？
传统布局中。父盒子800px,一个子盒子300px,有3个盒子。此时子元素就会出现换行的情况，flex布局中，默认子元素不换行。父盒子装不开则缩小子元素的宽度
示例

可以看出，再不换行的情况下，添加子元素，原有子元素会缩小以适应

align-items–侧轴-单

属性	说明
flex-start	上–下
flex-end	下–上
center	垂直居中
stretch	拉伸

示例

flex-start
flex-end
flex-center
stretch
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div
            margin-top: 500px;
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;
            /* 1.先水平居中 */
            justify-content:center;
            /* 2.再垂直居中 */
            align-items: center;

        
       div span
            width:200px;
            height: 100px;
            margin: 10px;
            background-color: papayawhip;
        
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>

    </div>

</body>
</html>

align-items–侧轴-多

align-content适用于换行情况

属性	说明
flex-start	上–下
flex-end	下–上
center	垂直居中
stretch	拉伸
space-around	先侧轴两头在平分剩余空间
space-around	侧轴平分剩余空间

示例

space-around:
2.space-between:
其余属性一致，不展示啦

flex-flow

flex-flow≈flex-direction+flex-wrap，相当于同时设置了flex-direction和flex-wrap属性。
认证一下，没有丝毫的变化

子项属性

align-self

允许单个项目与其他项目不一样的对齐方式，可以覆盖flex-items属性，默认值为auto表示继承父元素的align-items属性，没有父元素等同于stretch

.item
align-self:flex-end|flex-start|flex-end|center|baseline|stretch

align-self和名字一样，管好它自己self

order

定义项目的排列顺序
与z-index相反，order数值越小，排列越靠前

.item
order:<integer>；

      div span:nth-child(1)
            background-color:chocolate;
            order: -1;
        
        div span:nth-child(2)
            background-color: cornflowerblue;
            order: -3;
        
        div span:nth-last-child(1)
        order: 0;
        
    </style>
</head>

<body>
    <div>
        <span>-1</span>
        <span>-3</span>
        <span>1</span>
    </div>

</body>

flex

flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0,1，auto。指明子项目占的份数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div
            margin-top: 500px;
            display: flex ;
            width: 700px;
            height: 200px;
            background-color: cadetblue;


        
       div span
          
           height: 50px;
            margin: 10px;
            background-color: papayawhip;
        
  
        div span:nth-child(1)
            background-color:chocolate;
            flex-grow: 1;
        
        div span:nth-child(2)
            background-color: cornflowerblue;
           
            flex-grow: 3;
        
        div span:nth-last-child(1)
            flex-grow: 1;
        
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>