html新布局display:flex的常用用法

最新推荐文章于 2024-04-27 15:04:57 发布
最新推荐文章于 2024-04-27 15:04:57 发布
阅读量1.6k 收藏 2
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41992943/article/details/129925918
版权

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式 写在父元素

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式(写在父元素上)

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式（写在父元素上）

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

6、一行排不下 是否换行（默认是收缩显示 不换行）

flex-wrap：nowrap（不换行 默认值）

flex-wrap：wrap 换行

<div style="width:100%;display:flex;flex-direction: row;justify-content: space-around;align-items: center;padding: 0 20%;box-sizing: border-box;" >

写在项目身上（子元素）属性

1、定义项目的顺序

order： 2; 数字越大 就越靠后

2、设置单个项目在交叉轴的排列（和上面多行排列同理，就写进示例里了）

align-self:flex-start;

align-self:flex-end;

align-self:center;

3、项目放大 (子元素总宽小于父元素时放大)

flex-grow：1； 数字是份数 默认值0

4、项目的缩小（子元素总宽大于父元素时缩小）

flex-shrink：1； 默认值是1（收缩） 0 不收缩

榴莲豆包
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display：flex 弹性布局
最新发布
zzb_lly的博客
04-27 1569
stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性，伸展，就是会填充宽度。space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一 个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。flex-grow: 定义子元素的放大比例;
display:flex属性
weixin_46380993的博客
02-29 5万+
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
页面布局-----display:flex详解
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
flex布局的使用方法.pdf
05-12
未使用Flex布局时，元素按照常规流进行布局，可能需要使用浮动、绝对定位等方式进行对齐。示例代码中，`.center`内的三个粉色方块 `.left`, `.content`, `.right` 按照普通流左对齐。当启用了Flex布局后，通过`...
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...
flex-layout-demo:Flex布局教程，包含示例代码
05-13
Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{display: flex;}行内元素使用Flex布局.box{display: inline-flex;}在webkit内核的浏览器上必须加上webkit前缀.box{...
Flex 布局教程：语法篇.doc
05-31
通过这些属性的组合使用，开发者可以轻松实现诸如居中布局、等间距分布、自适应尺寸等多种复杂的布局效果，同时，Flex布局还支持项目自身的伸缩性，使得布局能够根据屏幕尺寸变化而自适应，极大地提高了响应式设计的...
CSS display:block在Firefox下显示布局错乱问题
09-25
本文向大家介绍一下如何解决CSS display:block在Firefox下显示布局错乱问题，按照常理，对于某一单元行需要显示时，使用CSS display:block属性，在IE浏览器中显示正常，但是当用Firefox浏览时却出现了布局错乱的问题...
display:inline-flex使用
pscool的博客
03-07 4493
（当然更简单的方式，不套外层的inline-flex容器，直接在.box中使用vertical-align:top也可以解决这个对齐的问题，但是假设这里的span和div大小是不一样的，那么它们在同一行中并不能垂直居中对齐，而且垂直居中也是比较麻烦的-或者说把2个都设置为vertical-align:middle也可以垂直居中,而如果使用margin-top则两个都会一起向下移动达不到效果。，不管它们两个是不是一样大小，都能比较简单的垂直居中对齐，这样就可以。
弹性盒子(display:flex)详解
m0_68845148的博客
11-09 4233
在css中我们使用display大多都是用来转换元素类型的，这种方法在我们实现页面布局中大部分地方都很好用，但难免还是会有一定的局限性，那么弹性盒子就有可能帮助我们更好的去进行批量改变子元素的布局。
display flex 左右_css display:flex 属性
weixin_33387339的博客
02-01 2376
一：display:flex 布局display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align...
Flex弹性布局
weixin_39150852的博客
04-04 195
块级元素： .box{ display: flex; } 行内元素： .box{ display: inline-flex; } 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction属性： .box { flex-direction: row | row-reverse | column | column-...
弹性盒布局
w8666999的博客
11-20 1372
弹性盒布局
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
flex布局（display:flex详解，容器的属性详解（主轴排列方式和对齐方式、换行、副轴和多根副轴对齐方向）、子元素属性详解（排列顺序、压缩放大计算方式、独立对齐、margin改变））
AIWWY的博客
05-27 1万+
目录 flex布局介绍 display:flex 与display:inline-flex区别 容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 子元素（flex item）属性 order flex-grow flex-shrink flex-basis flex align-self margin flex布局介绍 flex布局是flexible..
html display: flex
04-26
display: flex 是 CSS 中的一个属性，用于创建弹性布局flexbox）。它可以让容器中的子元素按照一定的规则自动排列，并且可以根据需要进行伸缩和对齐。 使用 display: flex 的容器称为 flex 容器，而其中的子元素称为 flex 项目。以下是一些关于 display: flex 的重要概念和用法： 1. Flex 容器： - 使用 display: flex 将一个 容器。 - 默认况下，flex 容器中的子元会水平排列。 - 可以通过设置 flex-direction 属性来改变子元素的排列方向，如 flex-direction: row（水平排列）或-direction: column（垂直排列）。 2. Flex 项目： - flex 容器中的每个子元素都是一个 flex 项目。 - 默认情况下，flex 项目会根据可用空间自动伸缩。 - 可以使用 flex 属性来控制 flex 项目的伸缩比例。 3. 主轴和交叉轴： - 在 flex 容器中，主轴是指 flex 项目的排列方向，交叉轴是指与主轴垂直的方向。 - 可以使用 justify-content 属性来控制 flex 项目在主轴上的对齐方式，使用 align-items 属性来控制在交叉轴上的对齐方式。 4. 其他常用属性： - flex-wrap：控制 flex 项目是否换行。 - align-content：控制多行 flex 项目在交叉轴上的对齐方式。 - align-self：控制单个 flex 项目在交叉轴上的对齐方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值