弹性盒子模型

最新推荐文章于 2022-08-28 21:10:11 发布
最新推荐文章于 2022-08-28 21:10:11 发布
阅读量385 收藏 1
点赞数 1
文章标签： 移动开发
原文链接：https://my.oschina.net/u/1589874/blog/222228
版权

CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：

  • 块布局 ― 为了呈现文档而设计出来的布局模式

  • 行内布局 ― 为了呈现文本而设计出来的布局模式

  • 表格布局 ― 为了用格子呈现 2D 数据而设计出来的布局模式

  • 定位布局 ― 为了非常直接地定位元素而设计出来的布局模式，定位元素基本与其他元素毫无关系


Css3中引入引入了新的布局模式：弹性布局，是为了呈现复杂的应用与页面而设计出来的。该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

弹性布局解决的问题：

  1. 子容器的宽度/高度自适应父容器的改变，即适应不同分辨率的界面
  2. 子元素按照设定的比例划分宽高
  3. 可设定子元素的显示顺序


Flexbox 规范时间表：

  • 2009年7月 工作草案 (display: box;)
  • 2011年3月 工作草案 (display: flexbox;)
  • 2011年11月 工作草案 (display: flexbox;)
  • 2012年3月 工作草案 (display: flexbox;)
  • 2012年6月 工作草案 (display: flex;)
  • 2012年9月 候选推荐 (display: flex;)

Flexbox 规范的相关工作已经进展了3年。不同的浏览器也实现了不同的实验版本。在2012年9月，Flexbox 语法的第三个主要修订版本进入到候选推荐阶段。

浏览器支持： （ie和opera支持情况不好，chrome和firefox和safari支持，适合手机端开发）

 



关于各浏览器中的写法

2009年的语法，已经过时，是需要加上对应前缀的。
2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本
但UC浏览器不支持12年的写法，所以要想完全使用最新写法，还是不现实。 

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */ 
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ 
display: -moz-flex; /* Firefox 18+ */ 
display: -ms-flexbox; /* IE 10 */ 
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */


主轴与侧轴的概念

与常说的 X、Y 轴有点像，不过也有点差异。主轴是伸缩布局流向的那个方向的轴，也就是在横排的时候是水平轴，在竖排的时候是垂直轴

233732_9z9j_1589874.png


弹性布局：09年的版本（以下以webkit内核为例）


实现弹性布局，需要在父容器和子容器中分别设定以下属性

父容器
 display:-webkit-box
 设定父容器为box
子容器
 -webkit-box-flex:
 如未设定此项，默认不会弹性布局


实现例子如下，三个子容器的宽度分别为1：2：3

HTML： 

<div class="wrap flxBox">
	<div class="bgGray flx1">A</div>
    <div class="bgPink flx2">B</div>
    <div class="bgBlue flx3">C</div>
</div>

css: 

.flxBox{display:-webkit-box;}
.flx1{-webkit-box-flex:1.0;box-flex:1.0;}
.flx2{-webkit-box-flex:2.0;box-flex:2.0;}
.flx3{-webkit-box-flex:3.0;box-flex:3.0;}

.wrap{width: 100%; height:100px; font:50px/100px microsoft yahei;  text-align:center; line-height:100px; color:#666}
.bgGray{background: #ccc;}
.bgPink{background: #999;}
.bgBlue{ background:#444;}

结果：


其他属性：

属性 简介
box-orient 设置或检索弹性盒模型对象的子元素的排列方式。
box-pack
 设置或检索弹性盒模型对象的子元素的对齐方式。
box-align
 设置或检索弹性盒模型对象的子元素的对齐方式。
box-flex
 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
box-flex-group
 设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group
 设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction
 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
box-lines
 设置或检索弹性盒模型对象的子元素是否可以换行显示。


1.box-orient 

box-orient：horizontal | vertical
horizontal：设置弹性盒模型对象的子元素为水平排列  （默认值）
vertical：设置弹性盒模型对象的子元素为纵向排列


上面的例子增加此属性： 
.flxBox{display:-webkit-box; -webkit-box-orient:vertical;}


效果



2.box-pack

box-pack：start | center | end | justify

start：设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）
center：设置弹性盒模型对象的子元素居中对齐
end：设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify：设置或弹性盒模型对象的子元素两端对齐



3.box-align

box-align：start | end | center | baseline | stretch

start：设置弹性盒模型对象的子元素从开始位置对齐
center：设置弹性盒模型对象的子元素居中对齐
end：设置弹性盒模型对象的子元素从结束位置对齐
baseline：设置弹性盒模型对象的子元素基线对齐
stretch：设置弹性盒模型对象的子元素自适应父元素尺寸


4.box-flex

box-flex：number  使用浮点数指定对象所分配其父元素剩余空间的比例。

5.box-flex-group

box-flex-group：<integer>  

用整数值来定义弹性盒模型对象的子元素所在的组。
动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间）
剩余空间则均分给数值最小的那个组（可能有1个或多个元素） 

.box li:nth-child(1) {
	-webkit-box-flex:1;	
	-webkit-box-flex-group:1;
	background:#ffb000;
}
.box li:nth-child(2) {
	-webkit-box-flex:1;	
	-webkit-box-flex-group:1;
	background:#ffd900;
}
.box li:nth-child(3) {
	-webkit-box-flex:1;	
	-webkit-box-flex-group:2;
	background:#ff7c00;
}

效果



6.box-ordinal-group

box-ordinal-group：<integer>

用整数值来定义弹性盒模型对象的子元素显示顺序。
数值较低的元素显示在数值较高的元素前面； 相同数值的元素，它们的显示顺序取决于它们的代码顺序； 


.box li:nth-child(1) {
	-webkit-box-ordinal-group:3;	
	background:#ffb000;
}
.box li:nth-child(2) {
	background:#ffd900;
}
.box li:nth-child(3) {
	background:#ff7c00;
}

效果：


7.box-direction

box-direction：normal | reverse

normal：设置弹性盒模型对象的子元素按正常顺序排列
reverse：反转弹性盒模型对象的子元素的排列顺序 


#box {
	-webkit-box-direction:normal;	
}
#box2 {
	-webkit-box-direction:reverse;
}

效果


8.box-lines

box-lines：single | multiple

single：弹性盒模型对象的子元素只在一行内显示
multiple：弹性盒模型对象的子元素超出父元素的空间时换行显示

  • Safari和Chrome已经支持box-lines，但没有实现该属性的效果


弹性布局：2012年的版本

父容器
 display:flex
 设定父容器为flex
子容器
 flex:
 如未设定此项，默认不会弹性布局


两个版本对应的属性

09属性 12属性
 简介
box-orient flex-direction 设置或检索弹性盒模型对象的子元素的排列方式。
box-pack
 justify-content
 设置或检索弹性盒模型对象的子元素的对齐方式。
box-align
 align-items 和 align-self
 设置或检索弹性盒模型对象的子元素的对齐方式。
box-flex
 flex:
 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
box-flex-group
设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group
 order
 设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction
 flex-direction
 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

display:flex弹性盒子实现对比（09年和12年的两个版本） 

<div class="wrap1 flexBox">
	<div class="bgGray flex1">aaa</div>
    <div class="bgPink flex2">bbbbbbbbbbbbbbbbbbbb</div>
    <div class="bgBlue flex3">cccccccc</div>
</div>
<br/><br/>
display:box
<div class="wrap flxBox">
	<div class="bgGray flx1">aaa</div>
    <div class="bgPink flx2">bbbbbbbbbbbbbbb</div>
    <div class="bgBlue flx3">cccccccc</div>
</div>
.flexBox{display: flex;}
.flex1{-webkit-flex:1.0;flex:1.0;}
.flex2{-webkit-flex:2.0;flex:2.0;}
.flex3{-webkit-flex:3.0;flex:3.0;}

.flxBox{display:-webkit-box;display:box;}
.flx1{-webkit-box-flex:1.0;box-flex:1.0;}
.flx2{-webkit-box-flex:2.0;box-flex:2.0;}
.flx3{-webkit-box-flex:3.0;box-flex:3.0;}

.wrap{width: 100%;}
.bgGray{background: #ccc;}
.bgPink{background: #FF7C7C;}
.bgBlue{ background:#BDD5E5;}

1. 父容器不限高度，高度随子容器的内容变化，父容器可设置最小高度

2. Display:flex的效果优于display：box

常用属性

属性 属性值 初始值 适用于

align-content

调准伸缩行在伸缩容器里的对齐方式

多行伸缩容器，单行不起作用



flex-start 各行向伸缩容器的起点位置堆叠

 flex-end 各行向伸缩容器的结束位置堆叠

center 各行向伸缩容器的中间位置堆叠

 space-between  各行在伸缩容器中平均分布            

 space-around 各行在伸缩容器中平均分布，在两边各有一半的空间

 stretch 各行将会伸展以占用剩余的空间


stretch multi-line flex containers

align-items

可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式

flex-start 伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边

 flex-end伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

center 伸缩项目的外边距盒在该行的侧轴上居中放置。

baseline如果伸缩项目的行内轴与侧轴为同一条，则该值与「flex-start」等效

 stretch

如果侧轴长度属性的值为「auto」，

则此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」

属性的限制下尽可能接近所在行的尺寸


stretch flex containers

align-self

用来在单独的伸缩项目上覆写默认的对齐方式。

auto

flex-start 

 flex-end 

 center 

 baseline 

 stretch

auto flex items

flex-basis

指定伸缩基准值

<'width'>

0:分配所以空间

auto：分配多余空间

auto flex items

flex-direction

属性可以用来设定伸缩容器的主轴的方向

这也决定了配置伸缩项目的方向。



row 主轴方向，伸缩项目依次序

 row-reverse  主轴方向，伸缩项目反次序

 column 侧轴方向，伸缩项目依次序

 column-reverse侧轴方向，伸缩项目反次序

row flex containers

flex-flow

伸缩方向与换行的缩写



<‘flex-direction’>

 <‘flex-wrap’>

see individual properties flex containers

flex-grow

属性可以用来设置扩展比率。负值不合法。

<number> 0 flex items

flex-shrink

可以用来设置收缩比率。负值不合法

<number> 1 flex items

flex

用来指定可伸缩长度的部件：

扩展比率、收缩比率，以及伸缩基准值。



none 

 [ <'flex-grow'> 

<'flex-shrink'>? 

<'flex-basis'> ]

see individual properties flex items

flex-wrap

控制伸缩容器是单行还是多行

也决定了侧轴方向 ― 新的一行的堆放方向。



nowrap 伸缩容器为单行。    

 wrap 伸缩容器为多行。

 wrap-reverse 多行反转

nowrap flex containers

justify-content

用于在主轴上对齐伸缩项目

这一行为会在所有可伸缩长度及所有自动边距均被解释后进行



flex-start 伸缩项目向一行的起始位置靠齐

 flex-end 伸缩项目向一行的结束位置靠齐

 center 伸缩项目向一行的中间位置靠齐

space-between 伸缩项目会平均地分布在一行里

 space-around伸缩项目会平均地分布在行里，两端保留一半的空间


flex-start flex containers

order

用来改变伸缩项目的顺序

<整数> 0 flex items and absolutely-positioned flex container children

属性演示的例子：

属性演示1

属性演示2


新旧版本的兼容性解决方案：

达到的效果：

1.ie10以上的版本兼容boxflex，ff，chrome及手机端浏览器支持

2.水平方向宽度自适应

3.dom中按内容，导航，右边栏顺序加载，但表现上顺序不同，如图：

以下是解决方案：

html结构： 

<div class="page-wrap">
  
  <section class="main-content">
    <h1>Main Content</h1>
    <p><strong>I'm first in the source order.</strong></p>
    <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>    
  </section>
  
  <nav class="main-nav">
    <h2>Nav</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  
  <aside class="main-sidebar">
    <h2>Sidebar</h2>
    <p>I am a rather effortless column of equal height.</p>
  </aside>
    
</div>



css 主要结构代码如下 
.page-wrap {
  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex;
          
 }

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  width: 60%;                     /* No flex here, other cols take up remaining space */
  
  -moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */
  
  background: white;
}

.main-nav {
  -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  -ms-flex-order: 1;              /* TWEENER - IE 10 */
  -webkit-order: 1;               /* NEW - Chrome */
  order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* OLD - Firefox 19- */
  width: 20%;                     /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;                /* Chrome */
  -ms-flex: 1;                    /* IE 10 */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  background: #ccc;
}

.main-sidebar {
  -webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  -ms-flex-order: 3;              /* TWEENER - IE 10 */
  -webkit-order: 3;               /* NEW - Chrome */
  order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* Firefox 19- */
  width: 20%;                     /* For OLD syntax, otherwise collapses. */
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  background: #ccc;
 
}


@media screen and (max-width:600px) {
	.main-sidebar{
		display: none;
	}
}



可以看出，除了ie10使用了中间的版本 

display: -ms-flexbox;

其他写法都是09年和12年的写法。因09年的box-flex不会严格按照设定的比例显示，因而使用百分比会比较稳妥。而支持支持12年版本的浏览器会按设定的flex数值的比例来控制。

最后用媒体查询来控制右侧边栏的显隐。

查看完整代码


以上是全部的弹性盒子模型及解决方案，也可能有遗漏的地方，请多提宝贵意见及补充！



参考资料

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-direction.html

转载于:https://my.oschina.net/u/1589874/blog/222228

chuntao3849
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性盒模型
weixin_46376652的博客
03-22 334
弹性盒模型 介绍：弹性盒模型是一种更加先进的开发模式，相比较于之前更加简单有效，可以对一个元素的子元素进行排列、对齐、分配空间，主要用于网页布局、移动端、小程序、平板等界面； 使用 display:flex 开启弹性盒模型，注意是父级控制子级，需要在父级进行设置； 一、特征： 1、会将所有的元素并排成一行，自动分配空间（如果子元素的大小超过父级的大小，会等比例缩小）； 2、子级的宽度不写为零，由内容撑开； 3、子级高度不写，会默认继承父级100%的高度； .box{
弹性盒模型（详解）
weixin_46726346的博客
10-18 5463
摘要 关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。 这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。 重点在于理解，而非去死记硬背。 1.创建弹性盒子 所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。 但是其实还有另一种创建方式：display:inline-flex。 乍一看这个属性和display:block , display:inline-block是不是有一点点像。 其
【CSS布局】—— flex（弹性）布局
热门推荐
qq_49002903的博客
08-28 3万+
CSS3新增了弹性盒子模型( Flexible Box或ElexBox)，是-种新的用于在HTML页面实现布局的方式。使得当 HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
弹性盒子模型.md
10-28
弹性盒子模型.md
ch6 弹性盒子模型3-30
03-20
这个"ch6 弹性盒子模型3-30"的主题可能指的是第六章中关于Flexbox的深入探讨，特别是涉及到30个关键概念或技巧的部分。在这一部分，我们将会详细解析弹性盒子模型的核心知识点。 首先，弹性盒子模型的主要目标是...
弹性盒子.rar
10-15
在传统的CSS布局中，如流式布局、网格布局等，处理复杂的动态内容和响应式设计往往较为困难，而弹性盒子模型正是为了解决这些问题而诞生的。 弹性盒子模型的核心概念是容器（flex container）和子元素（flex items...
前端学习day27：弹性盒模型
ysccsyysc的博客
06-03 487
1.弹性盒模型的定义 传统布局基本依靠display float position来完成，有些特殊的布局写起来不太方便。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 2.使用方法 为父级元素添加 display: flex; 或者 display: inline-flex; 。其子元素则可按照弹
CSS3基础 -- 弹性盒子模型
weixin_41387874的博客
09-05 257
弹性盒子模型 弹性盒子作用 使用弹性盒子，我们可以轻松创建自适应浏览器窗口的流动布局和自适应字体大小的弹性布局。 弹性盒子特点 当我们对一个元素定义它的display属性是flex或inline-flex时，这个元素就会变成一个弹性盒子，会具有弹性盒子特点。 当子元素宽度之和小于父元素宽度时，所有子元素最终的宽度就是定义的宽度。 当子元素宽度之和大于父元素宽度时，子元素会按照比例来划分。 弹性布局的基本概念 flex容器和flex items 采用弹性布局的元素，称为flex容器。 flex容器.
CSS弹性盒子
Americadk的博客
01-09 2724
一、弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 配空白空间 兼容性： IE11+及标准浏览器最新版是支持的 1、设置弹性盒子 任何容器都可以指定为一个弹性盒子 display: flex; display: inline-flex; 以上两条属性需要加给容器 以上两条属性需要加给容器 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 设为Flex布局以后，子元素的
关于弹性盒模型学习和总结
赫兹焦耳的博客
05-30 1704
首先是定义弹性盒模型#wrap{    display: -webkit-flex;    display: flex;}注意webkit内核必须加-webkit-前缀================================================第一个属性是 flex-direction 是确定主轴的方向     row：主轴方向是水平 从左到右。    column：主轴方向是...
CSS3 弹性盒布局模型和布局原理
Wendy
02-09 9353
在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。        虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。        引入弹性盒布局模型的目的是
H5学习弹性盒模型详解
Candy_mi的博客
05-07 1891
1. 语法1.1 语法基础概念任何一个容器都可以指定为Flex布局。 .box{ display: flex; }行内元素也可以使用Flex布局。 .box{ display: inline-flex; }同时需要注意，在不用的浏览器中，我们还需要在前面加上对应的浏览器前缀。 .box{ display: -webkit-fle...
CSS3伸缩布局盒模型
10-06 135
CSS3伸缩布局盒模型 早期的布局主要依赖于表格，从CSS2.1中有关于布局的机制有所改变，但还是并不多。开发者通常不愿意使用绝对定位，因为太不灵活；浮动定位常用于页面的布局，但对于全页多列布局来说，它总是存在一些...
怎么样让弹性盒子的前面几排等分，最后一行自动靠左等分
weixin_45548211的博客
09-02 1935
直接给父级一个伪元素选择器，再将每个等分元素的宽度设定好，就可以实现前面几排的等分，最后一行左对齐的等分。 div:after { content: ""; display: block; width: 600px; } ...
CSS基础知识——Flex弹性盒模型
weixin_45177251的博客
11-11 1127
Flex弹性盒模型弹性盒子的概念弹性盒子如何开启弹性盒子模型flex-direction 弹性盒子的概念 弹性盒子：是由弹性容器和弹性元素所组成的，它是通过设置display属性值为flex或inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素，弹性盒子只定义了子元素如何在弹性容器内布局，弹性子元素通常在弹性盒子内一行显示，默认情况下，每个容器只有一行。 弹性盒子 如何开启弹性盒子模型 给容器设置 display:flex 或 display:inline-flex flex-
css 弹性盒子模型
最新发布
05-29
CSS弹性盒子模型（Flexbox）是一种用于布局设计的CSS3模块。使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。 弹性盒子模型中，通过在容器上设置display:flex或display:inline-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值