弹性布局（一）

最新推荐文章于 2024-06-13 08:39:52 发布
最新推荐文章于 2024-06-13 08:39:52 发布
阅读量144 收藏 4
点赞数 3
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46461853/article/details/125009387
版权

目录

一、声明定义

1  声明块级弹性盒子  display:flex

2 声明内联级弹性盒子  display:inline-flex

二、flex-direction：用于控制盒子元素排列的方向。

row-reverse   从右向左排列元素 

 column-reverse   从下到上垂直排列元素

 三、flex-wrap  

 行元素换行  row 、wrap

垂直元素换行  column 、wrap

垂直元素反向换行  column wrap-reverse

 四、flex-flow  

一、声明定义

容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

1  声明块级弹性盒子  display:flex

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        article {
            height: 150px;
            margin-left: 100px;
            margin-top: 100px;
            outline: solid 5px silver;
            display: flex;
            padding: 20px;
        }

        article div {
            outline: solid 5px orange;
            text-align: center;
            font-size: 28px;
            line-height: 5em;
            width: 300px;
        }
    </style>

<!-- 声明块级弹性盒子 -->
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>

2 声明内联级弹性盒子  display:inline-flex

<style>
  ...
  article {
   	...
    display: inline-flex;
    ...
  }
  ...
</style>

二、flex-direction：用于控制盒子元素排列的方向。

使用在display:flex的父容器里，改变横轴的方向：

值描述
row从左到右水平排列元素（默认值）
row-reverse从右向左排列元素
column从上到下垂直排列元素
column-reverse从下到上垂直排列元素

row-reverse   从右向左排列元素 

<style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          margin: 100px;
          font-size: 14px;
          color: #555;
        }
        article {
          width: 500px;
          border: solid 5px silver;
          display: flex;
          box-sizing: border-box;
          padding: 10px;
         /* row-reverse   从右向左排列元素 */
          flex-direction: row-reverse;
        }
        article * {
          border: solid 5px orange;
          padding: 10px;
          margin: 10px;
        }
      </style>
...
     <body>
       <article>
          <h4>1</h4>
          <span>2</span>
           <p>3</p>
       </article>
     </body>

 column-reverse   从下到上垂直排列元素

<style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          margin: 100px;
          font-size: 14px;
          color: #555;
        }
        article {
          width: 500px;
          border: solid 5px silver;
          display: flex;
          box-sizing: border-box;
          padding: 10px;
         /* column-reverse  从下到上垂直排列元素 */
          flex-direction: column-reverse;
        }
        article * {
          border: solid 5px orange;
          padding: 10px;
          margin: 10px;
        }
      </style>
...
     <body>
       <article>
          <h4>1</h4>
          <span>2</span>
           <p>3</p>
       </article>
     </body>

 三、flex-wrap  

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

选项说明
nowrap元素不拆行或不拆列（默认值）
wrap容器元素在必要的时候拆行或拆列。
wrap-reverse容器元素在必要的时候拆行或拆列，但是以相反的顺序

 行元素换行  row 、wrap

 <style>
        * {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }

        head {
            display: block;
        }

        body {
            font-size: 14px;
            color: #555;
        }

        article {
            width: 500px;
            height: 250px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    </style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

水平排列反向换行   row 、wrap-reverse

flex-direction: row;
flex-wrap: wrap-reverse;

垂直元素换行  column 、wrap

flex-direction: column;
flex-wrap: wrap;

垂直元素反向换行  column wrap-reverse

flex-direction: column;
flex-wrap: wrap-reverse;

 四、flex-flow  

     是 flex-direction 与 flex-wrap 的组合简写模式。

     下面是从右向左排列，换行向上拆分行。

flex-flow: row-reverse wrap-reverse;
鹿蹊zz
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅析flex弹性盒子伸缩比
qq_62089165的博客
01-19 726
今天用一篇博客带你玩转flex属性！
CSS day12 移动端布局练习
qq_34620296的博客
09-13 702
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
web前端练习5----css 的 display: flex，box-sizing: border-box;
翟浩浩Android专栏
11-30 981
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为&amp;amp;quot;弹性布局&amp;amp;quot;，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 1子元素水平摆放,...
弹性布局（二）
鹿蹊zz的博客
06-10 993
一、轴说明 水平排列 下面是使用 flex-flow: row wrap 的主轴与交叉轴说明。 下面是使用 flex-flow: row-reverse wrap-reverse 的主轴与交叉轴说明。 垂直排列 下面是使用 flex-flow: column wrap 的主轴与交叉轴说明。 二、justify-content 用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。 选项 说明 flex-start 元素紧靠主轴起点 flex-end .
css系列-flex弹性盒子
前端蜗牛君
01-04 403
了解弹性 Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。 现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。 #响应体验 通过下面小米移动端中间区域水平排列元素，来体验一下响应布局带来的便利性。 <style> * { padding: 0; margin: 0; ...
css flex弹性布局 一行三列布局
℡メ㏑╭ァ小凯
12-18 9488
css flex弹性布局 一行三列布局
HTMl弹性布局
weixin_45723378的博客
04-27 1977
CSS3弹性布局
css3 display: grid；弹性布局一行固定几个
周家大小姐
07-08 5601
我这里设置的是一行3个间隔20px 我用的是vue <ul ref="scrollView" class="shop-list" @click.stop="handleImgClick($event)" > <li v-for="(item, index) in slidelist" .
弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
FlexboxLayout-----Android弹性布局
08-14
FlexboxLayout是一个Android平台上与CSS的弹性盒子布局模块 有相似功能的库。博客地址：http://blog.csdn.net/dickyqie/article/details/77155327
弹性布局.zip
01-25
在过去的一段时间里，我投入了大量的时间和精力进行学习，积累了丰富的个人学习资源。这些资源不仅包括各类书籍、课程和在线教程，还包括我在学习过程中的笔记、心得和反思。 首先，我发现阅读是一种非常有效的学习...
CSS中的EM属性之弹性布局
09-25
教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。
css3中有哪些新属性（特性）？
最新发布
tianxianghuiwei的博客
06-13 192
这些新属性和特性使得开发者能够更加灵活和精确地控制页面的外观和行为，提升用户体验和视觉吸引力。及其相关属性，实现灵活的布局方式，使得元素在容器中可以自动调整大小和位置。属性，实现在状态改变时，元素样式平滑过渡的效果，如颜色、大小、位置等。属性，为元素添加阴影效果，可以设置阴影的颜色、大小、模糊度和偏移量。属性，实现元素的旋转、缩放、倾斜和移动，而无需改变文档布局。属性，实现更复杂的动画效果，可以控制元素的逐帧动画行为。函数，实现背景色的渐变效果，可以创建平滑过渡的色彩效果。
Vue2基础：.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
我就知道你会来，我们一起进步吧！
06-10 259
.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
css3新增的伪类有哪些
ggq53219的博客
06-12 313
CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。请注意，某些伪类（如。
HTML5+CSS3+JS小实例：网格图库
艾恩小灰灰的博客
06-05 1356
实例：网格图库。技术栈：HTML+CSS+JS。
vue在hash路由模式下实现点击定位滑动
IT_moshang的博客
06-12 240
hash路由模式下实现点击滑动
20240612前端问题总结
weixin_55355282的博客
06-12 650
实现子元素垂直居中对齐；返回对象数组中所有id为1 的元素；前端实现数据分页（有elemen-ui和只有vue两种情况）；父窗口弹窗显示隐藏和传参相关问题（element实现和vue2实现两种情况）
弹性布局一行放不下自动换行
09-04
在弹性布局中，当一行放不下所有子元素时，会自动换行。这是因为使用了flex布局的父容器具有默认的flex-wrap属性值为"nowrap"，表示不换行。但是当容器的宽度不足以容纳所有子元素时，可以通过设置flex-wrap属性为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值