弹性盒布局常用元素(上）

最新推荐文章于 2022-09-30 11:27:27 发布
最新推荐文章于 2022-09-30 11:27:27 发布
阅读量425 收藏 1
点赞数
分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记 文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/120833109
版权

目录

弹性盒布局常用元素

在除了用浮动和postion元素等传统方式来进行页面布局以外，在CSS3中又引入了一个功能强大的弹性盒布局flex。

设置方式

给一个外层盒子div设置display:flex;外层元素就是flex容器,里面元素采用flex布局的块级标签的子元素。
代码如下：

    <style>
        .flex-box{
            background-color: lightskyblue;
            display: flex;
        }
        div>div{
            background-color: lightcoral;
            margin: 20px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>

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

当给外层设置flex属性值后，里面的子元素div元素默认是块级元素，变成弹性元素后就失去了原有的块级元素的特征，不再独自占一行。除了设置display:flex;将此元素将显示为弹性盒容器以外，还有另一种display:inline-flex;可以设置此元素将显示为行内弹性盒容器。
添加一个设置为display:inline-flex;的盒子和设置display:flex;的盒子进行对比，代码如下：

<style>
     .flex-box{
         background-color: lightskyblue;
         display: flex;
     }
     .flex-box>div{
         background-color: lightcoral;
         margin: 20px;
         width: 100px;
         height: 100px;
     }

     .inline-flex-box{
         background-color: lightblue;
         display: inline-flex;
     }
     .inline-flex-box>div{
         background-color: pink;
         margin: 20px;
         width: 100px;
         height: 100px;
     }
 </style>
    <div class="flex-box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
    <div class="inline-flex-box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>

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

flex-direction

flex-direction用来设置弹性元素的布局方向。
有以下属性值：

  • row：默认值，主轴为水平方向(水平布局),起点在左边，垂轴默认从上往下。
  • row-reverse：主轴为水平方向(水平布局),起点在右端，垂轴从上往下。
  • column：主轴为垂直方向（垂直布局）起点在上方，垂轴为从左向右。
  • column-reverse：主轴为垂轴方向（垂直布局）起点在下面，垂轴从左往右
flex-direction: row-reverse;

在这里插入图片描述

flex-direction: column;

在这里插入图片描述

flex-direction: column-reverse;

在这里插入图片描述

flex-wrap

flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

  • nowrap：默认值,表示不换行
  • wrap：换行
  • wrap-reverse：换行,第一行在下方

row:

  • wrap：
  .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-wrap:wrap;
        }

当弹性容器一行无法容纳其中元素时就会自动换行。
在这里插入图片描述

  • wrap-reverse：
       .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap-reverse;
        }

在这里插入图片描述

flex-wrap会对不同的flex-direction属性值产生不同的影响，例如：
当flex-direction为

row-reverse：

  • wrap
        .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap:wrap;
        }

在这里插入图片描述

  • wrap-reverse
    .flex-box{
           background-color: lightskyblue;
           display: flex;
           flex-direction: row-reverse;
           flex-wrap:wrap-reverse;
       }

在这里插入图片描述

column：

  • wrap
       .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 500px;
        }

在这里插入图片描述

  • wrap-reverse
 .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: column;
            flex-wrap:wrap-reverse;
            height: 500px;
        }

在这里插入图片描述

column-reverse：

  • wrap
  .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: column-reverse;
            flex-wrap:wrap;
            height: 500px;
        }

在这里插入图片描述

  • wrap-reverse
  .flex-box{
            background-color: lightskyblue;
            display: flex;
            flex-direction: column-reverse;
            flex-wrap:wrap-reverse;
            height: 500px;
        }

在这里插入图片描述

弹性元素主轴上的对齐方式（justify-content）

弹性元素在主轴上的对齐方式是通过justify-content属性来实现的，这个属性一共有6个值

  • flex-start：默认值,左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐,项目之间的间隔相等
  • space-around：项目两侧的间距相同,项目之间的间距比两侧的间距大一倍
  • space-evenly：所有弹性元素均匀排放，元素之间的间距折叠

flex-start：

在这里插入图片描述

flex-end：

在这里插入图片描述

center：

在这里插入图片描述

space-between：

在这里插入图片描述

space-around：

在这里插入图片描述

space-evenly：

在这里插入图片描述

弹性元素垂轴上的对齐属性（align-items）

弹性元素在主轴上的对齐方式是通过align-items属性来实现的

  • stretch：默认值。元素被拉伸以适应容器。
  • center：元素位于容器的中心。
  • flex-start：元素位于容器的开头
  • flex-end：元素位于容器的结尾。
  • baseline：元素位于容器的基线上。

stretch(默认值）

<style>
    .flex-box {
        background-color: lightskyblue;
        display: flex;
        height: 500px;
    }

    .flex-box>div {
        background-color: lightcoral;
        margin: 20px;
		padding:20px;
    }
</style>
<body>
    <div class="flex-box">
        <div>One</div>
        <div>Two<br>Two</div>
        <div>Three<br>Three<br>Three</div>
        <div>Four<br>Four<br>Four<br>Four<br>Four</div>
        <div>Five<br>Five<br>Five<br>Five<br>Five<br>Five</div>
    </div>
</body>

在这里插入图片描述

center

修改上面的代码

align-items: center;

在这里插入图片描述

flex-start

修改上代码为：

align-items: flex-start;

在这里插入图片描述

flex-end

修改上面代码：

align-items: flex-end;

在这里插入图片描述

baseline

不过这里要修改一下第三个div的字体效果才能明显出来

<style>
    .flex-box {
        background-color: lightskyblue;
        display: flex;
        height: 500px;
        align-items: baseline;
    }

    .flex-box>div {
        background-color: lightcoral;
        margin: 20px;
        padding: 20px;
    }
</style>
<body>
    <div class="flex-box">
        <div>One</div>
        <div>Two<br>Two</div>
        <div style="font-size: 2em;">Three<br>Three<br>Three</div>
        <div>Four<br>Four<br>Four<br>Four<br>Four</div>
        <div>Five<br>Five<br>Five<br>Five<br>Five<br>Five</div>
    </div>
</body>

在这里插入图片描述

align-self属性

align-self可以单独设置弹性容器中的弹性元素的align-items属性。例如：

<style>
    .flex-box {
        background-color: lightskyblue;
        display: flex;
        height: 500px;
        align-items: baseline;
    }

    .flex-box>div {
        background-color: lightcoral;
        margin: 20px;
        padding: 20px;
    }
    .two{
        align-self: flex-end;
    }
</style>
<body>
    <div class="flex-box">
        <div>One</div>
        <div class="two">Two<br>Two</div>
        <div>Three<br>Three<br>Three</div>
        <div>Four<br>Four<br>Four<br>Four<br>Four</div>
        <div>Five<br>Five<br>Five<br>Five<br>Five<br>Five</div>
    </div>
</body>

在这里插入图片描述

1900's 88 keys
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS height 及 flex布局一则
qq_37107268的博客
08-04 3505
首次渲染之后，父元素未设置高度，子元素即使设置获取不到父元素高度，高度由子元素的内容决定。而弹性布局会动态计算元素的高度，在确定最大的元素高度之后，相当于父元素高度确定，再由于的存在由浏览器计算出其他子元素的高度，最终使得各个子元素高度统一。如有不对之处，欢迎各位讨论和指正。......
CSS - 弹性布局（flex）
伏城之外的博客
07-20 2378
传统布局的不足、弹性布局、display:flex、flex-direction、主轴、侧轴、justify-content、align-items、一维布局、flex项目元素的特点、弹性宽高、flex-wrap、align-content与align-items的区别、flex-flow、flex-grow按比扩容、flex-shrink按权重比收缩、flex-basis、flex复合写法、order、align-self............
一、CSS弹性布局[弹性盒子、弹性元素]
黑日里不灭的light
09-29 824
弹性盒子的属性全都是写在父元素上面。
CSS — Flex布局、弹性容器、弹性元素
m0_59897687的博客
01-19 2001
目录 一、flex（弹性盒、伸缩盒） 二、弹性容器 1.flex-direction 2.flex-grow 3.flex-shrink 4.flex-wrap 5.flex-flow 6.justify-content 7.align-content 8.align-items 三、弹性元素 1.order 2.flex-grow 3.flex-shrink 4.flex-basis 5.align-self 6....
弹性容器和弹性元素
yss2917897194的博客
06-08 493
弹性盒子
(小程序)弹性布局盒子
06-05
在小程序开发中，"弹性布局盒子"是一种常用的布局方式，它允许开发者在不同尺寸的屏幕上创建灵活、响应式的布局。这种布局模式主要依赖于CSS3中的Flexbox（Flexible Box）模型，它为处理复杂的单轴布局提供了强大的...
响应式布局常用的3种技术.zip_什么是响应式框架
12-24
本篇文章将深入探讨响应式布局常用的三种技术：弹性布局（Flex布局）、媒体查询以及视口设置。 首先，我们来看弹性布局，也称为Flex布局。这是一种CSS3的新特性，用于处理容器内部元素的布局，特别适合于创建响应式...
web前端开发常用布局demo
09-20
CSS Grid布局是现代浏览器支持的一种强大的二维布局系统，允许开发者在行和列上精确控制元素的位置。 4. **Flex布局（Flexible Box Layout）** Flex布局，也称为Flexbox，主要用于一维布局，处理元素的对齐、顺序...
常用布局源代码
11-15
3. 弹性布局（Flexbox Layout） Flexbox是CSS3引入的一种一维布局模型，主要用于处理元素在容器内的对齐、排列和缩放。它特别适合单列布局，如导航菜单、页脚等。Flexbox可以轻松实现主轴对齐、交叉轴对齐，以及元素...
CSS 网页布局应该避免滥用div元素
12-11
在CSS布局中，可以利用新的布局技术如Flexbox（弹性盒布局）和Grid（网格布局）来替代传统的div嵌套，以实现更为灵活和响应式的页面设计。Flexbox允许在一行或多行中灵活地排列和对齐子元素，而Grid则提供了二维的...
CSS3 弹性盒子的常用属性
xh0112的博客
12-21 4718
弹性盒子flex 弹性盒子用弹性盒子来实现居中弹性盒子与浮动比较flex声明flex-direction属性flex-wrap属性justify-content属性align-items属性align-self属性，用于单个元素flex-grow属性flex-shrink属性flex-basis属性复合写法flex的用法order属性 flex 弹性盒子 用弹性盒子来实现居中 传统方法是绝对定位来实现的。 用弹性盒子更简单更方便。 绝对定位： 实现居中： 用弹性盒子来实现： 达到的效果和绝对定位的效
常用的弹性盒子有哪些？
老余的博客
09-30 146
弹性盒子就是为了处理页面的某一些布局。用声明一些，然后下面套方法。
弹性盒子(Flex Box)详解
热门推荐
web$-小白
07-24 3万+
弹性盒子 ,flex display
弹性盒子元素详解与特性
qq_42786725的博客
08-01 1463
display: flex; flex-direction: row;/*默认属性 row 如果改成垂直显示 子元素高度会等比例压缩*/ flex-wrap: nowrap;/*水平方向换行方式 默认nowrap如果显示不开等比例压缩*/ justify-content: space-around; ...
css3弹性盒子（二）弹性子元素
weixin_45846139的博客
04-19 2068
之前说完弹性容器的属性，再来看看弹性子元素的属性。弹性盒子由两部分组成，设置好弹性容器之后，再将子元素设置好，一个完整的弹性盒子就写好了。要想写好子元素，就需要了解子元素的属性。 弹性盒子 弹性子元素属性： 1、order 控制弹性容器里子元素的顺序，数值小的排在前面，可以为负值 值为 ： 整数 2、flex-grow 设置弹性子元素的扩展比率 设置弹性子元素的扩展比率，不允许为负值...
弹性元素align-content、align-items、align-self的区别
freshmen2016的博客
03-28 6422
align-content、align-items以及align-self都是在进行弹性布局所常用的属性，并且都是对齐弹性盒，那么他们之间到底有什么区别？ align-content 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进...
flex弹性布局之弹性元素
qq_36939013的博客
04-27 240
前端学习笔记94-弹性元素上的样式
weixin_45034895的博客
05-20 69
前端学习笔记94-弹性元素上的样式flex-growflex-shrinkflex-basisflexorder flex-grow 这个是弹性的增长系数，之前描述过，这里就不描述了。笔记91 flex-shrink 同上，不描述。 flex-basis 指定元素在主轴上的基础长度，如果主轴是横向的，则该值为元素的宽度；如果主轴是纵向的，则该值为元素的高度。 默认值为auto。 这个用得少，我就不描述了，具体查zeal。 flex 可以按顺序同时设置grow、shrink，basis。 如果写为： flex
弹性盒子布局子元素高度
最新发布
08-16
在弹性盒子布局（Flexbox）中，子元素的高度可以通过设置不同的属性来进行控制。以下是一些常用的属性和方法： 1. `flex-grow`：该属性决定了子元素在剩余空间中的拉伸比例。默认值为0，表示子元素不会拉伸。如果设置为正数，子元素会按照比例进行拉伸，负数则被忽略。 2. `flex-shrink`：该属性决定了子元素在空间不足时的收缩比例。默认值为1，表示子元素会等比例地收缩以适应容器。如果设置为0，子元素不会收缩。 3. `flex-basis`：该属性指定了子元素的初始大小。默认值为`auto`，表示子元素的大小由其内容决定。可以设置具体的像素值或百分比，也可以使用特殊值`content`来根据内容自动确定大小。 4. `align-self`：该属性可以用于单个子元素，用于覆盖在容器上设置的`align-items`属性。它决定了该子元素在交叉轴上的对齐方式。 5. `height`：可以直接在子元素上设置高度属性，以固定子元素的高度。例如，设置子元素的`height`属性为`100px`将使其高度固定为100像素。 需要注意的是，弹性盒子布局中的子元素的高度属性可能受到父级容器的限制、其他子元素的影响以及具体的布局需求等因素的影响。因此，在使用弹性盒子布局时，需要综合考虑各种因素来确定子元素的最终高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值