flex布局

最新推荐文章于 2023-07-24 09:39:39 发布
最新推荐文章于 2023-07-24 09:39:39 发布
阅读量278 收藏
点赞数
分类专栏： CSS3 布局方式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36729274/article/details/80763887
版权
<!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-UA-Compatible" content= "ie=edge" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" />
< title >Document </ title >
< style >
.box{
width: 500px;
height: 500px;
margin: 50px auto;
/* 设置flex布局方式 */
display: flex;
border: 1px solid green ;
/* 设置左对齐: justify-content是指x方向 */
/* justify-content:flex-start; */
/* 右对齐 */
/* justify-content:flex-end; */
/* 居中对齐 */
/* justify-content:center; */
/* 均匀分布：space-around 两端对齐;space-between */
/* align-items:y方向上，参数和x一样 */

/* 拉伸布局：会自动撑满容器 不可以设置高度，否则没有效果*/
/* align-items: stretch */
}
.box> div{
width: 100px;
height: 100px;
font-size: 80px;
line-height: 100px;
text-align: center;
}
.box> div:nth-child( 1 ){
background-color: antiquewhite;
/* 1：flex-grow:放大比例，就是当父盒子有空余，没有被填满，该添加这个属性的盒子被放大
2：flex-shrink:缩小比例，空间不足被调用
3.flex-basis:设置固定值的大小*/
/* flex-grow:1; */
/* 三个参数：放大 缩小 固定值 */
/* flex: 1 1 50px; */
}
.box> div:nth-child( 2 ){
background-color: rgb( 103, 13, 163);
/* 设置单独的位置 设置Y轴 */
align-self: flex-end
}
.box> div:nth-child( 3 ){
background-color: rgb( 202, 20, 105)
}
.box> div:nth-child( 4 ){
background-color: rgb( 17, 182, 30)
}
.box> div:nth-child( 5 ){
background-color: rgb( 72, 80, 70)
}
< / style >
</ head >
< body >
< div class= "box" >
< div >1 </ div >
< div >2 </ div >
< div >3 </ div >
< div >4 </ div >
< div >5 </ div >
</ div >
</ body >
</ html >
薛中然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局两端对齐，不留空
LQS000的博客
04-09 449
弄个空的div，判断整除的结果来显示空div的个数 “ Math.ceil ( num 必须是数字 / 4 ) ” 【一行4个，即除以4】用 kongDiv 代替 num。flex两端对齐，每行四个。
Flex布局
Anmi1416的博客
12-29 212
Flex布局
缩小浏览器窗口后，右边出现空白（flex布局导致，需设min-width）
sunshineTing2的博客
02-20 1630
页面中的安全宽度为1130px，若浏览器宽度小于1130会出现空白 因为使用了flex布局导致的， 需要设置一个最小宽度 min-width: 1130px;
flex布局学习
怡宝要加冰的博客
12-03 125
废话不多说，直接来吧！ flex就是弹性布局的意思，任何一个容器都可以设置为一个flex布局。但是**当一个容器设置为flex布局后那么float就会失效，clear清除浮动会失效，文字对齐也会失效！！！！** 设置一个容器为flex布局的方式为：display：flex； flex的属性有： flex-direction：决定主轴的方向（这个元素的子元素的排列方向） flex-direction属性的值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。
【CSS3】flex 弹性布局
Superman_H的博客
08-16 364
用于设置主轴的方向：改变主轴的方向后，交叉轴的方向也会变。用于设置排列的方式：复合写法：主轴的方向 & 排列的方式：用于设置项目沿着主轴的排列方式：用于设置项目沿着侧轴的排列方式 (单行 item 时使用)：用于设置项目沿着侧轴的排列方式 (多行 item 时使用)：设置了 后（换行后），需要使用 设置项目在侧轴上的排列用于分配容器剩余的空间：条件：项目的总 / < 父级 / ，即有剩余空间的情况下使用属性值 n 的取值范围为 ，表示当前项目瓜分的空间为其他项目瓜分的空间的 n 倍默认为 - 不
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
flex布局实例DOM
01-15
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
flex布局优化(两端对齐，从左至右)
秋来九月八
03-20 1万+
flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。
flex解决最后一个元素靠右问题
偏执
07-24 2652
align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box {flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item {它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。flex属性。
在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐
热门推荐
MFWSCQ的博客
04-11 3万+
我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图 以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了： 代码如下： <div class="wrap"> <div class="item">标题1</div>...
display常用属性及inline元素之间的空白和padding的问题
zyl_lyr1019的专栏
11-07 3756
本文主要对display 的几种最常用的方法进行了分析，分别为none，block，inline-block，inline，inherit。 其中主要分析了inline时，两个连续行内元素之间出现空白，以及行内元素占据空间等问题。 W3C规定： display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 d
解决网页右侧空白的方法
hoffy的博客
07-08 6703
第一次写这样的东西，可能有些地方表达不清楚，请见谅！ 可能是由于编写CSS样式变的时候没注意设置div层的宽度，所以要想解决空白，就需要麻烦地把每个可能出现错误的层的边框给显示出来，举个例子border：1px  #fff  solid;，这样就可以看出到底是哪个地方越了界，然后再修改参数即可。
css—flex布局
m0_64085523的博客
01-18 2302
flex布局 学习笔记一.简介：1.定义2.布局原理二.容器container（父元素）的属性1.flex-direction 设置主轴方向2.justify-content 设置主轴上子元素的排列方式3.flex-wrap 设置子元素是否换行4.flex-flow 复合元素，相当于同时设置了 flex-direction 和 flex-wrap5.align-items 设置侧轴上的子元素排列方式方式（单行）6.align-content : 设置侧轴上的子元素排列方式（多行）三,项目（item）子元
关于css中的align-content属性详解
weixin_30496751的博客
05-25 661
align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式。 条件:必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。 设置对象: 这个属性是对她容器内部的项目起作用，对父元素进行设置。 取值:stretch:默认设置，会拉伸容...
布局问题之-左侧宽度可变右侧内容自动充满空白部分
gongzhonghua的博客
05-22 368
场景： 考虑要素： 城市切换处宽度可变，搜索框宽度需自适应 解决方案： 父元素 display:flex: 左侧 min-width:100rpx; 右侧 flex:1;
主流布局 flex布局
最新发布
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值