前端学习-flex弹性布局

最新推荐文章于 2024-04-06 11:55:02 发布

Yan阿清

最新推荐文章于 2024-04-06 11:55:02 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端学习 html css

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123299313

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Flexbox（弹性盒模型）

Flexbox 是 CSS Flexible Box Layout Module 的常用名称，这是一种用于在单个维度（行或列）中显示项目的布局模型。
Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。

个人理解：一个容器里面的东西，沿着一个方向排列摆放，摆放满了就缩小（宽），所以你可以各种排列摆放（往那边排列，那个方向就是主轴，侧轴始终与主轴垂直）

侵删-图片出自：https://www.runoob.com/w3cnote/flex-grammar.html

一、变成flex容器

父元素添加   display：flex；

二、Flex容器属性

1、作用在父元素上

改变主轴方向（！！）

flex-direction: row（默认水平从左到右） | row-reverse （从右到左）| column （垂直从上到下）| column-reverse（从下到上）;

溢出换行

flex-wrap: nowrap（不换行）| wrap（换行） | wrap-reverse(反向换行);

flex-direction flex-wrap的简写

flex-flow: colunm  nowrap;

主轴方向对齐方式

space-between ：两端对齐，项目之间的间隔都相等
space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-conent: flex-start（左对齐） |flex-end（右对齐）|center（居中）|space-between （两端对齐，项目之间的间隔都相等）|space-around;

交叉轴（侧轴）单行对齐方式

baseline：项目的第一行文字的基线对齐。

align-items:flex-start |flex-end|center|baseline |strecth（默认值 自动拉伸）；

交叉轴（侧轴）多行对齐方式

align-content：flex-start | flex-end|center | baseline | strecth（默认值 自动拉伸）；

2、作用在子元素上

改变子项目的顺序

order：0；（数值越小，排列越靠前，默认为0，可以是负值）

容器剩余空间 :flow-grow、flex-shirnk（压缩）、flex-basic(项目长度)

flex:1;

子项目（自身）交叉轴对齐方式（！！）

align-self：flex-start | flex-end | center | baseline |strecth（默认值 自动拉伸）；

定义项目的放大比例，如果存在剩余空间，也不放大

flow-rgrow:0（默认）;

项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-shirnk:1(压缩)| 0（不压缩）

在分配多余空间之前，项目占据的主轴空间

flex-basic：auto（默认）；

案例：
用flex实现双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* html body 有盒子也要给高100% */
        html,
        body{
            height: 100%;
        }
        .box{
            height: 100%;
            /*变成弹性容器*/
            display: flex;
            background-color: aqua;
            /* 从上到下排列 */
            flex-direction: column;
        }
        .head,.footer{
            width: 100%;
            height: 50px;
            background-color: red;
        }
        .main{
            /*把头部和底部挤开 */
            flex: 1;
            width: 100%;
            background-color: black;
            /* 弹性盒主轴默认从左到右 */
            display: flex;
        }
          /* 左右被center挤走 */
        .left,
        .right{
            width: 200px;
            background-color: aqua;
        }
         /* 左右分开定义也可以 */
        /* .right {
            width: 100px;
            background-color: rgb(31, 204, 135);
        } */
        .main .center{
        /*剩余空间给center*/
            flex: 1;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <!-- 上中下，左中右 -->
    <!-- 改变窗口，左右宽固定200px不会改变，其他大小会变 -->
    <div class="box">

        <div class="head"></div>
        <div class="main">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

找青蛙练习：http://flexboxfroggy.com/

注：弹性布局更多用于移动端，因为兼容性问题在pc端用的比较少，但是在pc端用flex布局是真的好用嘿嘿。
！！！注意主轴方向，属性作用在父元素还是子元素。

本人小白，如果那里有错误请及时指出，大家互相学习，加油。
在这里插入图片描述

Yan阿清

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习-flex弹性布局

Flexbox（弹性盒模型）Flexbox 是 CSS Flexible Box Layout Module 的常用名称，这是一种用于在单个维度（行或列）中显示项目的布局模型。Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。个人理解：一个容器里面的东西，沿着一个方向排列摆放，摆放满了就缩小（宽），所以你可以各种排列摆放（往那边排列，那个方向就是主轴，侧轴始终与主轴垂直）侵删-图片出自：https://www.ru
复制链接

扫一扫