关于display:flex 进行排版问题

最新推荐文章于 2024-07-18 17:09:28 发布
最新推荐文章于 2024-07-18 17:09:28 发布
阅读量426 收藏
点赞数
分类专栏： 给那些刚学习前端的萌新们 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932463/article/details/109126789
版权

说说css3推出的display:flex吧
我们都知道前端中如果是一个块级元素， 类似p,div等 默认情况下都是垂直方向排版的， 有时候你想让这些元素水平排版，你也许会考虑float:left这种方式，但是呢，这样会脱离文档流，导致当前元素没办法撑起父元素。

这时候其实你就可以是 display:flex; 这方式， 它会将所有块级元素水平排版， 效果如下
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
不但如此 还可以选择对齐方式
在这里插入图片描述
在这里插入图片描述
还有 justify-content: space-between; 这种两端对齐的方式

呲溜滑_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决flex布局justify-content导致的多于元素对不齐问题
qq_51558433的博客
07-07 1148
效果如下 这样的样子很丑可以使用计算宽度来解决：假设容器的宽度是600px,每个项目的宽度是110px,每行可以显示5个，剩余宽度= 600px-110x50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin-right设置10px，最后一个不设置即可 原理 因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是，所以我们看不见，也，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3
display flex 左右_css display:flex 属性
weixin_33387339的博客
02-01 2398
一：display:flex 布局display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align...
flex 布局文本与数字不水平对齐问题?给父元素加一个行高
qq_42859450的博客
11-27 1506
父元素：.appt-box { display: flex; align-items: center; } 如下图：文本和数字不在同一水平线上，原因：数字的高小于文本的高，给父元素添加一个行高可解决 父元素：.appt-box { display: flex; align-items: center; line-height: .3rem;//大小自己设置 } 加行高之后的效果如下： ...
CSS：弹性布局（display:flex）
最新发布
dsgdauigfs的博客
07-18 663
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
CSS中display属性的inline-block导致布局错位问题
梦凝哲雪
07-24 1133
当然也可以是使用浮动float 或者 弹性盒子flex 完成上述需求。发现核心问题是 inline-block 默认的对齐方式。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 759
<!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...
display flex布局
m0_59642141的博客
07-08 2293
calc算法、flex布局、项目属性、媒体查询、怪异盒模型、标准盒模型、em，rem区别、meta元数据标签、移动端、移动端1px边框
页面布局-----display:flex详解
热门推荐
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
CSS 用display:inline-block代替float: left排版注意事项
tel15277169530的博客
05-30 3350
此处显示新 Div1标签的内容      此处显示新 Div2标签的内容      此处显示新 Div3标签的内容 效果如图： 此处显示新 Div1标签的内容   此处显示新 Div2标签的内容   此处显示新 Div3标签的内容 在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不
html文章排版 float和display应用
m0_61707987的博客
09-27 132
html文章排版 float和display应用。
display:flex属性 justify-content: space-between和flex-flow:wrap一起使用的问题
九步
04-09 5364
.wrap { width: 400px; display:flex; /*弹性盒子*/ justify-content: space-between; /*两端对齐，子元素之间有间隙*/ flex-flow: row wrap;/*子元素溢出父容器时换行*/ } span {width: 100px;background-color: green;c...
display:flex 均等排列 一行排两列或者多列，最后的元素靠左对齐
夜阑珊妖妖
10-15 1万+
display:flex flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴...
html的display属性
万物皆可互联，一切均可编程
09-10 2万+
block标签(比如div) 默认独占一行显示，撑满一行，高度为0 支持所有css命令 设置了宽度后，后面剩余的宽度还是会占一行，只是不显示 属性display可以改变标签的标签的属性 inline（内嵌）标签（比如span） 不占一行显示，后面可以继续跟同类型标签 内容撑开宽度 不支持宽高 不支持上下的margin和padding 代码换行被解析 属性display可以改变标签的标签的属性...
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..
使用flex布局后文字位置发生偏移如何解决
qq_43504355的博客
05-01 4443
使用flex布局后文字位置发生偏移如何解决 在页面排版过程中有时候会用到flex进行页面的布局设置,将文字对齐到一行中,但是使用后发现会发生文字的偏移 页面代码 <div class="title_head"> <div class="title_context"> <h2>管理后台</h2> <a&g...
CSS的display的多种布局方式总结(inline-block,table,flex)
Yueqin0512的博客
11-03 8890
1.display:inline-block布局 常见块级元素 常见行内元素 一：display的几个常用的属性值 inline（行内元素） 1.使元素变成行内元素，可以与其他行内元素共享一行，不会独占一行 2.不能更改元素的height，width的值，大小由内容撑开 3.可以使用padding,margin上下左右都有效 block（块级元素） 1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度 2.能够改变元素的height，width的值 3.可以设
“品”字布局两种方法
ysn121101的博客
08-12 1642
用定位布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台布局-定位</title> <style> html { color: #333; font:normal 12px '微软雅黑','Micros...
微信小程序 display:flex;
02-06
display:flex; 是CSS中的一个属性，用于设置元素的布局方式为弹性布局。在微信小程序中，也可以使用该属性来实现灵活的布局效果。 具体来说，display:flex; 可以应用于父元素（容器）上，将其子元素（项目）按照一定的规则进行排列。通过设置不同的属性值，可以实现水平布局、垂直布局、居中对齐等效果。 以下是一些常用的属性值及其作用： - flex-direction: 设置主轴的方向，可以是水平方向（row）、垂直方向（column）等。 - justify-content: 设置主轴上项目的对齐方式，可以是居中对齐（center）、两端对齐（space-between）等。 - align-items: 设置交叉轴上项目的对齐方式，可以是居中对齐（center）、顶部对齐（flex-start）等。 - flex-wrap: 设置项目是否换行，可以是不换行（nowrap）、自动换行（wrap）等。 通过使用 display:flex; 可以更方便地实现微信小程序中的页面布局和排版效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值