flex布局

最新推荐文章于 2022-10-15 05:41:08 发布

Eva3288

最新推荐文章于 2022-10-15 05:41:08 发布

阅读量158

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Eva3288/article/details/107523205

版权

css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

flex布局目的：为盒状模型提供灵活性，用来解决垂直居中等特殊问题

容器属性

1. display: flex / -webkit-flex; --元素定义为flex 容器

把元素定义为flex 容器，定位flex容器后，它的子元素会自动成为它的容器成员--也叫flex项目

采用 Flex 布局的元素，称为容器。它的所有子元素自动成为容器成员，称为为项目。
默认情况下，flex项目都是按照主轴方向排列的，所以展现的效果就类似行内元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div., initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        -----------------display: flex/-webkit-flex; --------------
        1.这样box 就成了flex容器，子元素.sub就变成了项目成员-flex项目
        2.当一个元素变成flex项目后，就会失去一些原本的展现效果： 
        .sub 的div 就不再独占一行了,默认情况下，flex项目都是按照主轴方向排列的，所以展现的效果就类似行内元素的布局 
  
        -----------------flex容器的常用属性1： flex-direction--------------
         1. 主轴的方向，也就是容器中项目的排列方向 row/column/row-reverse/column-reverse

        -----------------flex容器的常用属性2： flex-wrap------------
        */
       
        .box{
            display: flex;
            display: -webkit-flex;  /*用来适配 webkit 内核的浏览器*/
            flex-direction: row-reverse;
        }
        .sub{
            background: red;
            color:#fff;
            font-size:12px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sub">1</div>
        <div class="sub">2</div>
        <div class="sub">3</div>
        <div class="sub">4</div>
        <div class="sub">5</div>
        <div class="sub">6</div>
    </div>
    
</body>
</html>

2. flex-direction - 主轴的方向，也就是容器中项目的排列方向

.box{
    display: flex;
    display: -webkit-flex;  /*用来适配 webkit 内核的浏览器*/
    flex-direction:row/column/row-reverse/column-reverse
}

在这里插入图片描述

3. flex-wrap – 项目大小超过主轴宽度时，是否换行

flex-wrap：nowrap不换行/wrap换行/wrap-reverse沿交叉轴相反的方向换行

在这里插入图片描述

4. justify-content – 定义项目在主轴上的对齐方式

左对齐，右对齐，中心对齐，两端对齐，环绕对齐–只是设置对齐的起点/方式，并不改变主轴的方向，也就是项目的排列方向

justify-content:flex-start; 项目从主轴的起点开始沿着主轴方向排列
flex-end 从终点开始 沿着主轴方向排列

5. align-items – 定义项目在交叉轴上的对齐方式

stretch 是默认值–当交叉轴为垂直方向的时候，项目没有设置高度，或者高度为auto的时候，项目的高度等于容器的高度
在这里插入图片描述

项目属性

1. order – 项目在容器中的排列顺序

order：项目在容器中的排列顺序，数值越小排名越靠前

2. flex-grow – 项目的放大比例

flex-grow：通过一个数值来定义项目的放大比例，默认为0，即存在剩余空间也不进行放大项目

3. align-self – 用来替换容器的align-items 属性

align-self：使一个项目与其他项目在交叉轴上拥有不同的对齐方式，用来替换容器的align-items 属性，默认值auto 遵循align-items的定义

Eva3288

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局

文章目录容器属性1. display: flex / -webkit-flex; --元素定义为flex 容器2. flex-direction - 主轴的方向，也就是容器中项目的排列方向3. flex-wrap -- 项目大小超过主轴宽度时，是否换行4. justify-content -- 定义项目在主轴上的对齐方式5. align-items -- 定义项目在交叉轴上的对齐方式项目属性1. order -- 项目在容器中的排列顺序2. flex-grow -- 项目的放大比例3. align-sel
复制链接

扫一扫