Flex布局（第二版）

已于 2023-07-14 23:47:45 修改
阅读量83 收藏
点赞数
分类专栏： html/css 文章标签： 前端
于 2023-07-14 23:42:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73104281/article/details/131733068
版权

flex布局（第二版）

第一版flex盒子

一、布局基础

在这里插入图片描述

二、容器属性

2.1 修改主轴方向flex-direction

row 横向
row-reverse 横向-反方向
column主轴为纵向
colum纵向-反方向
在这里插入图片描述

2.2 主轴对齐方式justify-content

flex-start

在这里插入图片描述

flex-end

在这里插入图片描述
在这里插入图片描述

居中显示center

在这里插入图片描述

以上块元素之间没有距离

space-between

相当于两端对齐方式（分散对齐）
在这里插入图片描述
在这里插入图片描述

space-around

块与块之间有距离，且距离左右两侧也有距离，但是不均分
在这里插入图片描述

注意2倍距

在这里插入图片描述

绝对均分space-evently

均分
在这里插入图片描述

在这里插入图片描述

2.3 侧轴上的项目对齐方式align-items

flex-start、end

在这里插入图片描述

center

在这里插入图片描述

在这里插入图片描述

stretch

没有高度=自适应？
在这里插入图片描述

2.4折行属性flex-wrap

默认情况

== 默认情况下（nowrap）不会折行，会挤压原有宽度==
如下图
在这里插入图片描述
无固定高度，则如下
在这里插入图片描述

折行后——调整行间距 align content

在这里插入图片描述

（1）center

在这里插入图片描述

（2）space-between

在这里插入图片描述

（4）space-around

在这里插入图片描述

（4）space-evently

在这里插入图片描述

三、 项目属性

主要对子元素操作

3.1 单独调整侧轴对齐方式align-self

拉伸前提：无初始高度在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.2 调整顺序属性order

52341
在这里插入图片描述
可以取负值

3.3 flex：1

所以项目都添加flex：1的效果在这里插入图片描述
只给二号元素添加flex：1的效果
在这里插入图片描述

3.4不挤压不折行效果（水平方向滚动）flex-shrink：0再给容器加上overflow：auto

在这里插入图片描述
在这里插入图片描述

时不久留
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3的Flexbox骰子布局的实现及问题讲解
09-24
取而代之的是，我们对第二个点（`.face-02 .dot:nth-of-type(2)`）应用`align-self: flex-end`，允许单独调整这个项目的对齐方式。 第三面`face-03`与第二面类似，但中间的点需要居中。因此，我们对第二个点使用`...
收罗CSS布局中有关水平和垂直居中的N种方法
09-25
第二种方法是使用`text-align: center`，这通常用于文本居中，但它仅限于文本内容，不能用于块级元素。 第三种方法结合`display: inline-block`和`text-align: center`。将元素设置为`inline-block`，并在其父元素...
flex
Bliss_妍的博客
08-19 279
flex布局则是通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。 例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。 而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float flex布局属性主要由容器属性和项目属性构成 容器属性: 1.f
flex布局下，怎么改变元素的顺序？
最新发布
前端小白的博客
12-20 847
请注意，order属性接受任意整数值，负数也可以使用。同时，当多个元素的order值相同时，它们会按照它们在文档流中的位置进行排序。可以使用order属性来改变Flex布局下元素的顺序。order属性指定了Flex容器内部各个项目的排列顺序，其默认值为0。2、为每个子元素设置order属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列。在上述代码中，通过将第二个子元素的order属性设置为2，可以将其放置在其他子元素之后。通过调整order属性的值，可以改变元素的顺序。
flex space-between 第二位置贴左问题
Technology_hands的博客
11-22 458
如果我们想让他贴左边或者右边的话，我们设置左边一个距离，右边一个auto即可。那么第二个数据将居中对齐。
flex布局warp自动换行后按顺序排列
皮卡丘
05-05 2353
flex布局warp自动换行后按顺序排列 一、现象 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>
flex布局
郑板桥30的博客
06-08 955
弹性盒子是一种简单而强大的布局方式，我们可以通过弹性盒子指明空间的分布方式、内容的对齐方式和元素的视觉顺序。内容可以轻易地横向排列或者纵向排列，也可以沿着某一条轴布局。弹性盒子最突出的一个特点，能让元素在不同屏幕尺寸下或者不同显示设备做好适应准备，因为内容可以根据空间的大小增减尺寸。 ​ 弹性盒子依赖的是父子关系。在父元素上面声明 来创建一个弹性容器，它主要负责内部子元素的布置，控制子元素的布局。在弹性容器中的这些子元素，一般都叫弹性元素。2. flex-direction首先从布局的大体来看，首先要决定元
flex3的cookbook书籍完整版dpf（包含目录）
07-14
flex3的cookbook书籍完整版dpf（包含目录）,目录是我花了两个多小时自己整理的，希望对大家有帮助。 目录： 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...
Flex3应用教材.docx
07-27
**第二章 MXML编程** 2.1 MXML概述 MXML是一种声明式语言，用于描述用户界面的布局和组件。它简化了UI设计，使得开发者可以专注于界面元素的外观和行为，而无需过多关注底层实现。 2.2 MXML标签和ActionScript类 ...
Spring攻略(第二版 中文高清版).part2
03-16
第10章　Spring和Flex　386 10.1　Flex入门　388 10.1.1　问题　388 10.1.2　解决方案　388 10.1.3　工作原理　388 10.2　离开沙箱　393 10.2.1　问题　393 10.2.2　解决方案　394 10.2.3　工作原理　394 10.3　为...
Flex布局
H_ungry的博客
05-13 425
一 使用条件 适合移动端或不考虑兼容性问题的PC端页面布局 二 布局体验 案例为移动端的携程案例 三 开始学习 flex 布局原理 采用Flex布局的元素为Flex容器，简称容器。所有子元素自动成为容器成员，称为容器项目，简称项目 即：父盒子为容器，给父盒子添加display:flex 来控制子盒子的排列方式 可以给子盒子横向排列也可以纵向排列 父盒子的常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上子元素的排列方式 flex-wrap:设置主轴是否换行
CSS的flex布局
weixin_45514905的博客
05-29 120
container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向 1.flex-container 1.1 flex-direction(主轴方向) flex-direction:row; （布局为一行，从start开始排） flex-direction:row-reverse; (布局为一行，从end开始排) flex-direction:column; (布局为一列，从start开始排
【移动端网页布局】flex 弹性布局子项目属性 ③ ( order 子项目属性 - 设置子项目元素排列顺序 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-13 1990
一、order 子项目属性 - 设置子项目元素排列顺序 二、代码示例 - 设置子项目元素排列顺序
[css] flex 间距 gap 折行滚动（九宫格 四宫格 横向滚动）
qq_14993591的博客
07-07 3731
九宫格 横向滚动 参考：felx gap实现两行多列布局，列的数目不定，左右可以滚动。 先固定父元素高度，然后用flex纵向排列（ flex-direction: column;）。然后子元素高度设置为父元素一半，这样一纵列只能放下两个元素，然后超出换行 （flex-wrap: wrap;），元素就自动向右排列了。 参考：flex 实现两行滚动布局实现的思路...
HTML入门（flex拆行）————DAY6
详情请看注释
10-17 1004
flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。 但是flex默认的里面的盒元素是不会自己进行折行的，所以需要进行一些设置，来得到更好的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...
flex布局第二行居左
06-08
要让第二行居左，可以将`justify-content`设置为`flex-start`，如下所示： ```css .container { display: flex; flex-wrap: wrap; justify-content: flex-start; } ``` 这样，当子元素超出父容器宽度时，会自动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值