Flex 弹性布局-Flex常用属性

最新推荐文章于 2023-08-09 21:42:54 发布

前端.木子李

最新推荐文章于 2023-08-09 21:42:54 发布

阅读量409

点赞数

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

本文链接：https://blog.csdn.net/qq_34485368/article/details/109197082

版权

html+css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

什么是弹性布局

一句话：就是用于解决一个盒子内多个子盒子的排列及其分布。（不存在float浮动塌陷问题）

display: flex;/*开启弹性布局,注：设置于父元素*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .box {
            width: 350px;
            border: 1px solid black;
            display: flex;
            /*开启弹性模式*/
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item" style="width: 100px;height: 100px;background: red;"></div>
        <div class="item" style="width: 100px;height: 100px;background:rebeccapurple;"></div>
        <div class="item" style="width: 100px;height: 100px;background:blue;"></div>
    </div>
</body>

</html>

未开启弹性布局效果图

开启弹性布局效果图
在这里插入图片描述

float

主要为了解决多个元素共存一行。

缺点：子元素浮动后，父元素高度塌陷；当父元素宽度，大于所有的的子元素宽度之和，为了美观，需要人为计算边距。
解决办法：在父元素加 overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .box {
            width: 350px;
            border: 1px solid black;
        }
        
        .box div {
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item" style="width: 100px;height: 100px;background: red;"></div>
        <div class="item" style="width: 100px;height: 100px;background:rebeccapurple;"></div>
        <div class="item" style="width: 100px;height: 100px;background:blue;"></div>
    </div>
</body>
</html>

效果图：在这里插入图片描述

弹性布局属性

父元素属性

👉 justify-content属性主要用于控制子元素在主轴方向上(主轴方向默认是水平从左向右)的排列及分布方式。

假设：主轴的方向是水平的，从左向右的。

flex-start 弹性开头(相当于左对齐)，默认的

flex-end 弹性结尾(相当于右对齐)

center 居中对齐

space-between 等距分隔(左、右子元素与父元素左边、右边没有间距)

space-around 等距环绕(左、右子元素与父元素左边、右边有间距)

align-items 属性主要用于控制子元素在次轴方向上(交轴方向默认是垂直从上向下)的排列及分布方式。

👉align-items(设置单行效果)/align-content(设置多行效果)主要用在子元素高度不一致的情况下使用`

假设：次轴默认就是垂直的，方向是从向下的。

flex-start /*上对齐，默认的*、

flex-end 下对齐

center 居中对齐

baseline 首行文字对齐

stretch 上下都对齐(上下拉伸)，当没有设置子元素的高度时会拉伸

👉flex-wrap主要用于实现多行布局

nowrap 不实现换行

当不使用弹性换行时，如果子元素的宽度超出了父元素的宽度，那么子元素宽度会被自动压缩。

wrap 当子元素的总宽大于父元素时，进行换行显示。向下换行

wrap-reverse

当子元素的总宽大于父元素时，进行换行显示。向上换行

设置多行的对齐方式，只要当换行时才会生效。

子元素属性

flex 为子元素设置所要占据父元素尺寸的权重。

ouder 设置子元素排列顺序，值越小越靠前。默认0。

align-self 仅设置当前子元素，跟align-items用法一样

flex-direction修改主轴的方向，当主轴方向修改时，次轴会自己修改为与主轴交差。

值： row 默认是从左向右

row-reverse 从右向左

column 从上向下

column-reverse 从下向上

前端.木子李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex 弹性布局-Flex常用属性

day2 弹性布局什么是弹性布局一句话：就是用于解决一个盒子内多个子盒子的排列及其分布。（不存在float浮动塌陷问题）display: flex;/*开启弹性布局*/float主要为了解决多个元素共存一行。缺点：子元素浮动后，父元素高度塌陷；当父元素宽度，大于所有的的子元素宽度之和，为了美观，需要人为计算边距。弹性布局属性父元素属性???? justify-content属性主要用于控制子元素在主轴方向上(主轴方向默认是水平从左向右)的排列及分布方式。假设：主轴的方向是水平
复制链接

扫一扫