CSS的flex弹性布局

最新推荐文章于 2024-06-08 02:34:03 发布
最新推荐文章于 2024-06-08 02:34:03 发布
阅读量553 收藏 4
点赞数 7
分类专栏： Html与Css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59745705/article/details/135923141
版权

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>flex弹性布局</title>

    <style>

        /* 加了flex是弹性容器 */

        .box{

            display: flex;

            height: 300px;

            /* justify-content: start; 默认情况 */

            /* justify-content: flex-end;  从右边开始 */

            /* justify-content: center;    盒子居中 */

            /* justify-content: space-between; 空白间距均分在弹性盒子之间 */

            /* justify-content: space-between; 弹性盒子与容器之间间距相等,父级剩余的尺寸分配间距分配 */

            /* justify-content: space-around;  空白间距均分在弹性盒子两侧 */

            /* justify-content: space-evenly;  弹性盒子与容器之间间距相等 */

            border: 1px solid black;

            /* align-items: center; 居中 */

            /* align-items: flex-end; */

            /* align-items: flex-start; */

        }

        /* 让第二个div，侧轴居中对齐 */

        .box div:nth-child(2){

            align-self: center;

        }

        /* 子级div是弹性盒子：沿着主轴方向排列，默认是水平的 */

        .box div{

            width: 200px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <!-- 默认情况下，主轴方向的尺寸是靠内容撑开，侧轴默认拉伸 -->

    <!-- 认识Flex

    flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

    flex模型不会产生浮动布局中脱标现象，布局更简单更灵活

    -->

    <!-- flex --组成

    设置方式：给父元素设置display:flex,子元素可以自动挤压或拉伸

    组成部分：

    弹性容器

    弹性盒子(根据子级div数量宽高自动改变子级div的宽高)

    主轴：默认在水平方向

    侧轴/交叉轴：默认在垂直方向

    -->

    <div class="box">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <!-- <div>4</div>

        <div>5</div>

        <div>6</div>

        <div>7</div>

        <div>8</div>

        <div>9</div> -->

    </div>

    <!-- 布局

        1.创建flex容器：display：flex

        2.主轴对齐方式：justify-content

        属性值：

        flex-start：默认值，弹性盒子从起点开始依次排列

        flex-end：弹性盒子从终点开始依次排列

        center：弹性盒子沿主轴居中排列

        space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

        space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

        space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

        3.侧轴对齐方式：align-items

        当前弹性容器内所以弹性盒子的侧轴对齐方式（给弹性容器设置）

        某个弹性盒子侧轴对齐方式：align-self

        单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

        属性值：（align-items和align-self属性值一样）

        stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）

        center：弹性盒子沿着侧轴居中排列

        flex-start：弹性盒子从起点开始依次排列

        flex-end：弹性盒子从终点开始依次排列

        4.修改主轴方向：flex-direction

        主轴默认在水平方向，侧轴默认在垂直方向

        属性值：

        row：水平方向，从左向右（默认）

        column：垂直方向从上到下

        row-reverse：水平方向，从右向左

        column-reverse：垂直方向，从上向下

        5.弹性伸缩比：flex

        控制弹性盒子的主轴方向的尺寸

        属性值：整数数字，表示占用父级剩余尺寸的份数

        弹性盒子换行：flex-warp

        弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

        属性值：

        warp：换行

        nowrap：不换行（默认）

        行对齐方式:align-content

        注意，对单行不生效，要有flex-warp：warp

        属性值：

        flex-start：默认值，弹性盒子从起点开始依次排列

        flex-end：弹性盒子从终点开始依次排列

        center：弹性盒子沿主轴居中排列

        space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

        space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

        space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

    -->

</body>

</html>

小小程序员.¥
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
CSS3 Flex 弹性布局实例代码详解
01-19
一、基本概念 //任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、容器属性 1. flex-direction flex-direction 决定项目的排列方向   .box { flex-direction: row | row-reverse | column | column-reverse; } 2.
css flex 弹性布局详解
12-30
案例基础布局 html <ul class=box> <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> </ul> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
CSS FLEX 弹性布局详解
qq_53569667的博客
11-29 784
关于 CSS flex 布局的知识点，可作手册参考。
CSS flex 弹性布局
Corn___的博客
09-06 1004
flex弹性布局
CSS Flex 弹性布局
blog
07-13 1421
文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器
css 弹性布局 flex 详解
2301_76669854的博客
11-28 1344
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。align-self属性允许单个项目有与其他项目不一样的对齐方式，（4）justify-content 项目在主轴上的对齐方式。（默认,不换行 / wrap（换行,第一行在上方）/（和父元素的align-self值一致）/（默认，主轴为水平方向，起点在左）/（项目的第一行文字的基线对齐）/
CSS3 flex弹性布局
xiangxiongfly
07-21 1554
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
Css Flex 弹性布局中的换行与溢出处理方法
热门推荐
忧郁的蛋的专栏
10-02 1万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）_css flex
m0_61409092的博客
04-21 1219
我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。布局排版是页面基础且关键的一环。其中，常用的自适应布局技术：Flex布局。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box {行内元素也可以使用 Flex 布局。.box {
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
Css Flex弹性布局中的换行与溢出处理
qq_58626489的博客
02-04 2089
在Flex弹性布局中，元素的布局仅依赖于父容器的设置，而不再需要复杂的相对或绝对定位。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
CSS - 弹性布局（flex）
伏城之外的博客
07-20 2353
传统布局的不足、弹性布局、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 flex弹性布局 一行三列布局
℡メ㏑╭ァ小凯
12-18 9479
css flex弹性布局 一行三列布局
CSS实现一个雨滴滑落效果
云加速
05-28 1648
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
02.体验CSS以及Bootstrap框架
最新发布
2301_80401457的博客
06-08 425
(1)在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以水平排版。Ⅱ.div是一个容器级标签（可以嵌套其他所有标签），span是文本级标签（只能嵌套文字，图片，超链接）用于提升某个直接选中标签的选择器1中的某个属性的优先级，可以将被指定属性的优先级提升为最高。（如果前面的一个元素浮动了，后面的一个元素没有浮动，这时前面的元素会盖住后面的一个元素）（如果元素是块级元素，则垂直排版；（1）内容的宽度和高度是通过标签的width/height属性设置的宽度和高度。
css系列：进度条
zkx529的博客
06-05 171
样式部分为笔者需求的样式，需要根据自己项目需要调整。！！有个问题是偶发性绑定事件不触发，暂时还没解决，欢迎大家帮忙解决。
积累常用css
Study_Live_Sun的博客
06-04 239
1、封面文字，垂直居中，可以两列并排。2、宽border效果。
【ARM Cache 及 MMU 系列文章 6 -- Cache 寄存器 CTR_EL0 | CLIDR | CCSIDR | CSSELR 使用详解 1】
CodingCos的博客
06-05 196
LoUU（Level of Unification, Uniprocessor）是ARMv9架构中的术语，指在针对处理器元素（PE）执行PoU clean 或者 invalidate 时，必须clean或invalidate的最后一级缓存。与LOC（Level of Coherence，一致性级别）类似，LoUU的值也代表了一个缓存级别。当LoUU字段值为0x0时，意味着在执行到 PoU clean 或 invalidate 时，不需要clean 或者 invalidate任何缓存级别。
css flex弹性布局display flex
11-24
CSS3 引入了弹性盒布局，又称为 Flex 布局。Flex 布局是一种更加高效的布局方式，可以方便地实现各种复杂的布局效果。其中，`display: flex` 是将一个容器指定为 Flex 布局的方式之一。 下面是一个简单的例子，展示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小程序员.¥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值