弹性布局经验总结

最新推荐文章于 2022-09-19 09:07:45 发布

前端深造中

最新推荐文章于 2022-09-19 09:07:45 发布

阅读量356

点赞数

分类专栏： flex 弹性布局文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_52767262/article/details/120315027

版权

flex 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

弹性布局

1 篇文章 0 订阅

订阅专栏

给父元素加:display:flex; 使子元素横向排列,不用在为每一个子元素添加浮动了,父元素也不需要在清除浮动2,高度依然会被子元素撑开

1…弹性布局的基本概念
使用 flex 布局的元素（父元素），称为"容器"
它的所有“子元素”自动成为容器成员，称为 “项目”
它们各自有控制布局的属性，必须是容器包裹着项目
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .d1{
            width: 100%;
            background-color: yellow;
            display: flex;
             /* 加上下面这句话效果是一样的 默认效果是从左往右排序
             其他属性的值你们可以自行尝试一下*/
            flex-direction:row;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

效果如图所示
2.容器到属性
(1)主轴的方向
flex-direction 代表主轴的方向，即项目的排列方向

row 左向右 ( 默认的)
row-reverse 右向左
column 上向下
column-reverse 下向上

(2)项目换行
默认情况下，项目都排在一条线上。flex-wrap属性定义如果一条轴线排不下，如何换行的模式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .d1{
            width: 300px;
            background-color: yellow;
            display: flex;
            flex-wrap: wrap;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 2px solid black;
            
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

在这里插入图片描述

nowrap 默认不换行
wrap 换行
wrap-reverse 反向换行
(3)主轴和换行的简写方式
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap横向排列不换行。
flex-flow: row wrap; 横向换行
(4)主轴上的对齐方式
justify-content属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。
前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果
center 居中对齐，一起居中
space-between 两端对齐，项目之间的间隔都相等，左右贴边
space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

(5)多轴线对齐方式
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
center 与交叉轴的中点对齐。
space-between 第一行和最后一行贴开始和结束，其他均分中间位置
space-around 每行间距两侧或上下间距相等，比边框间距大一倍
stretch 默认值

要想运用这个的时候必须要有主轴才能凸显效果
(6)flex 属性简写
flex 属性是 flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为 0 1 auto。后两个属性可选。
常用设置是：flex:0 0 ??px; 不放大，不缩水，占多少尺寸

前端深造中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
弹性布局经验总结

给父元素加:display:flex; 使子元素横向排列,不用在为每一个子元素添加浮动了,父元素也不需要在清除浮动2,高度依然会被子元素撑开1…弹性布局的基本概念使用 flex 布局的元素（父元素），称为"容器"它的所有“子元素”自动成为容器成员，称为 “项目”它们各自有控制布局的属性，必须是容器包裹着项目<!DOCTYPE html><html lang="en"><head> <title>Document</title&g
复制链接

扫一扫