css基础精华---Flex 布局教程：实例篇

最新推荐文章于 2024-07-02 14:26:30 发布
最新推荐文章于 2024-07-02 14:26:30 发布
阅读量2.2k 收藏 11
点赞数 1
分类专栏： css基础精华

转载地址：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

                    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。

你会看到，不管是什么布局，Flex往往都可以几行命令搞定。

我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。

一、骰子的布局

骰子的一面，最多可以放置9个点。

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板一律如下。


<div class="box">
  <span class="item"></span>
</div>

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。


.box {
  display: flex;
}

设置项目的对齐方式，就能实现居中对齐和右对齐。


.box {
  display: flex;
  justify-content: center;
}



.box {
  display: flex;
  justify-content: flex-end;
}

设置交叉轴对齐方式，可以垂直移动主轴。


.box {
  display: flex;
  align-items: center;
}



.box {
  display: flex;
  justify-content: center;
  align-items: center;
}



.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}



.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

1.2 双项目


.box {
  display: flex;
  justify-content: space-between;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}



.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}



.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

1.3 三项目


.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

1.4 四项目


.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

HTML代码如下。


<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS代码如下。


.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

1.5 六项目


.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}



.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

HTML代码如下。


<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

CSS代码如下。


.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

1.6 九项目


.box {
  display: flex;
  flex-wrap: wrap;
}

二、网格布局

2.1 基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码如下。


.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2.2 百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>


.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

三、圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下。


<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码如下。


.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。


@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

四、输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮。

HTML代码如下。


<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS代码如下。


.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

五、悬挂式布局

有时，主栏的左侧或右侧，需要添加一个图片栏。

HTML代码如下。


<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS代码如下。


.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

六、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

HTML代码如下。


<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS代码如下。


.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

七，流式布局

每行的项目数固定，会自动分行。

CSS的写法。


.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

（完）

文档信息

珠峰培训

stuQ

留言（91条）

马甲嘎嘎 说：

正想学这个，你就来了

2015年7月14日 19:38 | # | 引用

drunkevil 说：

这个感觉好有用啊！

2015年7月14日 21:16 | # | 引用

stonex 说：

非常感谢，尝试使用下。看样子能简化好多东西。

2015年7月15日 10:18 | # | 引用

session 说：

骰子应该是6点

2015年7月15日 14:02 | # | 引用

Cola 说：

里面这“vertical-align: center;”还有用么。

2015年7月15日 15:52 | # | 引用

yujieyu7 说：

很好，很实用

2015年7月15日 16:55 | # | 引用

clover 说：

太帅了！

2015年7月15日 18:12 | # | 引用

chshouyu 说：

很好很实用

2015年7月15日 19:24 | # | 引用

Cheney 说：

引用Cola的发言：

里面这“vertical-align: center;”还有用么。

vertical-align 没有 center 的值，要给也只能给 middle。反正好像也没有用到。

2015年7月16日 09:58 | # | 引用

msisliao 说：

赞，大爱这篇示例，原先感觉非常理解不了，看完后、、嘿嘿，真的理解大半了。。非常感谢

2015年7月16日 11:04 | # | 引用

张杨 说：

阮老师的文章就是干。

2015年7月16日 11:33 | # | 引用

outlaws 说：

骰子这个例子很有意思，工作中很多场景都有骰子这个例子的应用。学习了~~！233333

2015年7月16日 16:25 | # | 引用

Cola 说：

引用Cheney的发言：

vertical-align 没有 center 的值，要给也只能给 middle。反正好像也没有用到。

codepen 的demo里面有这一句

2015年7月22日 10:54 | # | 引用

megasu@qq.com 说：

对于兼容问题该如何处理呢？

2015年7月25日 14:45 | # | 引用

bolo 说：

关于四项目的第二个布局(四个角各一个点): 
如果骰子的四个点大小变小, 
flex-wrap;flex-basis:100%;
的解决方案会导致下方的两个点不会对齐在左下角右下角

原作者给的方案会好些:
.box {
display: flex;
justify-content: space-between;
}

.box .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}

2015年7月26日 12:59 | # | 引用

前端菜鸟 说：

display:flex现在应该是用兼容性的吧，在部分的安卓手机里面不好用，现在还在用display：box

2015年7月28日 14:48 | # | 引用

听雨剑主 说：

有个项目就是用的display:-webkit-flex，然后使用overflow:scroll-y进行滚动，不过滚动效果远没有使用原生滚动好，不知道有没有什么其他比较好的解决方案。

2015年8月 4日 16:38 | # | 引用

Jolson 说：

非常感谢，最近正学习flex布局，写的很清楚。

2015年8月 5日 21:01 | # | 引用

Brant 说：

非常棒的文章。以后做内容流时可以尝试使用~

2015年8月 8日 21:45 | # | 引用

joker 说：

CSS终于有了像样的自动布局了~

2015年8月21日 14:06 | # | 引用

weager 说：

这么难懂的知识经过阮老师的讲解都变得如此简单，赞！阮老师的文笔真是厉害

2015年8月23日 12:58 | # | 引用

吴聊 说：

纯干货 不错

2015年8月26日 10:36 | # | 引用

大叔 说：

不错，博主这图文并茂的 杠杠的

2015年9月 8日 19:46 | # | 引用

小松鼠 说：

写的不错，赞一个！

2015年9月17日 12:10 | # | 引用

davidchen 说：

学习了。

2015年9月18日 10:58 | # | 引用

shenger 说：

色子以下的网页布局部分说的很笼统啊，希望以后能再说的详细一点，谢谢啦

2015年9月19日 09:58 | # | 引用

dvaknheo 说：

Visual Studio .Net 的布局方式， flex 能做到么
如一下两者格式，都要把主内容放在第一
树| 主内容
树|_______
树|底板

树| 主内容
__|_______
底板

2015年9月28日 10:42 | # | 引用

Zaki 说：

阮老师的东西不错

2015年10月21日 14:23 | # | 引用

george.hu 说：

谢谢楼主这么详细的教程
但是项目三是有点问题的，在容器上应该加上一个flex-direction:column的属性

.box {
display: flex;
flex-direction:column;
}

.item:nth-child(2) {
align-self: center;
}

.item:nth-child(3) {
align-self: flex-end;
}

2015年10月28日 22:12 | # | 引用

fonglezen 说：

引用前端菜鸟的发言：

display:flex现在应该是用兼容性的吧，在部分的安卓手机里面不好用，现在还在用display：box

觉得应该与时俱进，4.0安卓的用户都占据了97%以上了吧。还有2.x的，估计也是不怎么上网不怎么用手机的用户吧。所以可以放心大胆放心用。

2015年10月29日 11:00 | # | 引用

yooly 说：

太神了，写得很好，通俗易懂

2015年11月 4日 14:48 | # | 引用

yooly 说：

骰子的布局，阮老师的从左到右排版，我学了一下，改成从上到下，哈哈，flex太好用了，http://codepen.io/anon/pen/qOywrB

2015年11月 4日 15:23 | # | 引用

phc 说：

在骰子的布局中的第四个项目中确定能达到像图中所示的吗，如果每个项目之间没有margin值，从主轴的右边对齐那不是第一行的三个点都要靠右吗，而不是每个都有间隔

我的代码设置成如下才能达到阮老师的效果

display: flex;
flex-wrap: wrap;
flex-direction:row-reverse;
justify-content:space-between;
align-content:space-between;

2015年11月 6日 10:08 | # | 引用

Biox 说：

非常谢谢！你的文章对我很有帮助！：）

2015年11月 6日 11:10 | # | 引用

unclefeng 说：

中间那个网格布局的百分比布局，是不是少啊了很多元素。css代码和html代码对不上号啊

2015年11月14日 19:39 | # | 引用

phc 说：

是不是

justify-content: 还有等等……ie10 都不兼容的

2015年11月21日 11:09 | # | 引用

tommyfok 说：

很好用，使用之后发觉……兼容性堪忧啊，过段时间用就很好

2015年12月13日 17:26 | # | 引用

之一 说：

不知道阮老师对flex在安卓的微信中的各种问题有什么建议，是换掉这种布局呢还是用各种兼容方法写。有类似的兼容性的文章吗

2015年12月14日 18:29 | # | 引用

小房子 说：

.Grid-cell2.u-1of3 {
flex: 1 0 33.3333%;
background-color:#7CFC00;
}

.Grid-cell2.u-1of4 {
flex: 1 0 25%;
background-color:#E74D3C;
}

如果flex的放大比例都为1的话，那它的宽度在什么基础上进行变化的啊？一直没搞懂这个

2016年1月26日 15:42 | # | 引用

yunxi 说：

在UC浏览器下 不支持吧

2016年1月30日 23:46 | # | 引用

奈何 说：

请问下，第三个 圣杯布局，为什么css中要写很多个 flex：1

2016年2月16日 17:45 | # | 引用

奈何 说：

关于flex的2篇文章都看完了，但阮大神没有讲，flex与盒模型相比的最大优势在何处，以及为何在移动端要使用flex布局

2016年2月16日 18:18 | # | 引用

响应式初学者1 说：

学习了，非常详细易懂，适合入门！

2016年2月17日 10:37 | # | 引用

shangga 说：

flex:1的意思是什么？

2016年4月 7日 16:25 | # | 引用

小静 说：

非常感谢，很喜欢您的教程，发现1.3三项目少了.box{justify-content: space-between;},难道只有我一个人发现了...

2016年4月10日 13:54 | # | 引用

Helios 说：

这个是不是兼容性不算太好呀，只有chrome完全支持呀

2016年4月12日 21:36 | # | 引用

汤米 说：

"1.4 四项目"的代码有点问题，如果设置justify-content:flex-end的话，第一行的3个元素不会那么平均的分布的，而是挤在右边，像float:right似的

2016年4月22日 10:59 | # | 引用

张阳 说：

单项目中第五个，水平和垂直居中，父级设置display：flex；后，子元素设置margin：auto；应该是最简单的。我是在新书css揭秘上看的。具体的原理我还不太懂。

2016年5月25日 18:16 | # | 引用

Eliza 说：

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

2016年6月 7日 11:10 | # | 引用

cody 说：

引用Eliza的发言：

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

他自己开篇就说了= =

2016年6月14日 16:00 | # | 引用

开源无憾 说：

引用Eliza的发言：

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

黑的毫无水平，按你这个思路，所有这类文章都是“抄”的CSS官方文档。

2016年6月19日 12:21 | # | 引用

Ella 说：

赞，筛子布局非常易懂。实际示例开发过程中非常常见，很实用。
干货！很喜欢阮老师写作的风格

2016年6月19日 16:08 | # | 引用

王冬 说：

太厉害了，就连菜鸟教程的flex教程都是转自这里的。
http://www.runoob.com/w3cnote/flex-grammar.html

2016年6月24日 11:53 | # | 引用

军 说：

项目1.3是错的，这样写样式不能是截图上面的。
flex-direction: column;justify-content: space-between; 
box得加上这两条属性

2016年7月 1日 11:30 | # | 引用

happyyyhy 说：

膜拜大牛

2016年8月 2日 15:39 | # | 引用

tolerious 说：

引用session的发言：

骰子应该是6点

不不不， 阮老师的意思应该是最多可以放九点，哈哈。

2016年9月13日 10:14 | # | 引用

Wgggg 说：

圣杯布局,IE11完全乱掉了

2016年9月20日 13:14 | # | 引用

韩辉 说：

阮老师，我想问一下。flex布局中，各个item之间的间距是如何设置的呢？用margin可以做到，但是面试的时候面试官说不用margin也可以。不是很理解。我看到的flex布局都是item连接到一起的。

2016年9月23日 15:22 | # | 引用

deg 说：

flex布局能不能实现这样的效果：容器内的项目固定宽高，设备宽度减小，项目自动换行，换行之后内容部分整体保持水平居中，同时保持项目七的流式布局？能的话改如何实现？

2016年10月29日 10:47 | # | 引用

ben 说：

收获很大，感谢

2016年10月29日 20:03 | # | 引用

德芙小猪 说：

非常好的教程。看了受益匪浅。

2016年11月 3日 09:42 | # | 引用

德芙小猪 说：

全部看明白了，感觉收获很大。

2016年11月 3日 10:38 | # | 引用

夏夜星空 说：

厉害啊，写的很精简，没有多少废话。赞

2016年11月 7日 15:53 | # | 引用

FLEX布局 说：

非常给力，感谢！

2016年11月28日 10:49 | # | 引用

coderfoobar 说：

引用tolerious的发言：

不不不， 阮老师的意思应该是最多可以放九点，哈哈。

那还是麻将九饼吧

2016年12月15日 14:54 | # | 引用

Dreambuild2021 说：

受益匪浅,豁然开朗!

2016年12月21日 18:48 | # | 引用

koz 说：

1.2那
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这个错了，得不到图中的效果。

2016年12月27日 00:08 | # | 引用

前端爱好者 说：

属性是好属性，但是兼容性还是不怎么好，IE和一票国产移动端浏览器就坑死了

2017年1月10日 15:22 | # | 引用

昭 说：

悬挂布局里面的基本栗子里面第三个块怎么能紧接着在第一个块的下面，而不受第二个块的高度影响

2017年1月12日 18:22 | # | 引用

不再犹豫 说：

flex布局怎样设置单个子项在主轴上的位置？

2017年1月14日 18:47 | # | 引用

高大磊 说：

多谢，看过最好的博客

2017年2月12日 15:50 | # | 引用

刘继伟 说：

感谢！非常感谢！不敢碰触的问题，在研究了一天后，就豁然开朗了。知识分享者，赞！我也会去教更多的人掌握flex技能。

2017年2月19日 13:54 | # | 引用

losymear 说：

圣杯布局的header,
footer {
flex: 1;
}
大了些吧 flex:0.3这样

2017年2月19日 15:03 | # | 引用

jeremy 说：

看了这个，瞬间觉得 flex 要颠覆以前小心谨慎的display+float布局啊啊啊

2017年2月27日 22:26 | # | 引用

33 说：

flex-basis: 100%有什么用

2017年3月 1日 15:43 | # | 引用

24 说：

flex: 1是什么哪个属性

2017年3月 1日 15:49 | # | 引用

哈喽基地 说：

引用不再犹豫的发言：

flex布局怎样设置单个子项在主轴上的位置？

我也有在想呢，有时候需要将子项设置在位置，特别是需要按某个比例。

2017年3月14日 10:53 | # | 引用

辣牛 说：

引用Cola的发言：

里面这“vertical-align: center;”还有用么。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2017年3月17日 17:36 | # | 引用

赵瑞 说：

一个点的时候，只设置.box {display:flex} 是不行的，因为父元素的align-items默认值为stretch，会使子元素的高度充满整个容器，而不是在左上角。所以应该还要给.box加上align-items: flex-start;

2017年3月18日 21:12 | # | 引用

webkws 说：

.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

flex:1 => 1 1 0

2017年4月15日 22:22 | # | 引用

季一辉 说：

引用koz的发言：

1.2那
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这个错了，得不到图中的效果。

2017年4月18日 13:23 | # | 引用

王先森 说：

非常实用 谢谢老师 跟着学习了一遍 让我对布局更加深入了

2017年4月25日 11:55 | # | 引用

dady 说：

1.5第三个少了：
.row:nth-child(1){
justify-content: space-between;
}

2017年5月 2日 13:25 | # | 引用

捍卫者 说：

谢谢，好文章，学习啦，简单易懂！

2017年5月 6日 15:28 | # | 引用

左蓝 说：

@phc：

对的，我也是亲自写了一遍才感觉这里阮老师写得达不到效果

2017年5月18日 14:03 | # | 引用

tinywenwen 说：

flex: 0 0 25%;
这是多个属性连用吗？分别是什么属性？

2017年5月23日 16:29 | # | 引用

石心 说：

引用季一辉的发言：

我试了也不行，是不是作者代码没有给全

2017年6月14日 17:05 | # | 引用

jmcheng 说：

五、悬挂式布局 那里的效果是怎样实现的呢？感觉像瀑布流的布局

2017年6月15日 11:06 | # | 引用

HYZT 说：

阮老师的文章就是鞭辟入里，精炼而不冗杂，膜拜大神了，有些刚好有用

2017年6月16日 19:41 | # | 引用

xiaoyujia 说：

色子布局中两个点的项目中的倒数第二个：一个点在正中间另一个点在左上角那个布局不对吧？
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这样写并不能保证到达效果，当外层盒子的尺寸变大时候，正中间的那个点就偏离中心位置了，图例中的‘视觉居中’是色子的尺寸和点的尺寸凑巧的结果吧

2017年6月16日 23:48 | # | 引用

雨枫 说：

后面的例子父元素的宽度是怎么设置的？



zhaihaohao1
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css：九宫格布局的五种方法（grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性）
YangLu888
04-20 6780
css实现九宫格的五种方法：grid网格布局、flex布局、inline-block+letter-spacing属性、float浮动定位、table表格布局
CSS -- flex布局【超详教程】
qq_48802092的博客
07-27 857
flex布局可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为Flex布局。
用flex布局实现九宫格
weixin_53141315的博客
08-25 1025
扩展：若想让每个格子的内容呈现以下效果，则在每个格子里实现flex布局。
宫格和弹性盒布局怎么用？
最新发布
宇珩的博客
07-02 425
文章讲述了宫格布局和弹性盒布局
Flex 布局教程：实例篇
weixin_51341611的博客
03-21 1108
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅。我的主要参考资料是的文章和。
阮一峰Flex 布局系列教程：实例篇
孟迎霞 CSDN
07-15 2329
推荐国内技术人阮一峰最新推出的系列教程，有兴趣者，欢迎跟踪学习7月15日更新 Flex 布局教程之2：实例篇 7月10日更新 Flex 布局教程之1：语法篇，介绍常见布局的Flex写法...
Flex布局教程：实例篇
qq_34309704的博客
01-11 364
Flex布局教程：实例篇 本文中介绍的布局格式包括以下七种： 一、骰子的布局 二、网格布局 三、圣杯布局 四、输入框的布局 五、悬挂式布局 六、固定的底栏 七、流式布局 一、骰子的布局 二、网格布局 2.1基本网格布局（其实可以用boorstrap？吧） 最简单的网格布局就是平均布局。在容器里边平均分配空间   Html代码如下：  //flex容器 ... //
Flex布局教程（非常受用）
热门推荐
訾博（ZiBo）的博客
01-13 5万+
前言： 本文大部分参考自阮一峰的Flex布局教程，部分进行了“易于理解”的描述； 原文地址： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 一、语法篇 1、概述 网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + f.
前端学习（257）:flex-direction
歌谣的博客
12-30 298
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
vue项目中 五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
csl125的博客
01-12 1557
背景：项目中用到1、4、6、9、12、16宫格排序，拖拽换位等场景，项目是监控的视频矩阵，用户矩阵拖拽排序换位，之前已经实现1、4、9、12、16等矩阵式排列的拖拽排序，但是六宫格要求五小一大，之前的基于vue-grid-layout开发的拖拽对换位置已经实现除了五小一大的 需求图：五小一大互相可以拖拽换位排序 实现方案： 基于vue-dragginghttps://github.com/hilongjw/vue-dragging 实现六宫格拖拽，该组件也可实现1,4、6、9等需要简单修改即可.
Flex布局
这个昵称没有被占用吧的博客
09-29 358
一、Flex布局是什么？Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，指定方式如：.box { display:flex; }行内元素也可以使用Flex布局：.box { display:inline-flex; }webkit内核的浏览器，必须加上-webkit前缀：.box { displ
css布局 flex布局 grid网格布局 布局练习
好好学习天天向上
06-04 1941
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。主轴：弹性元素的排列方式为主轴 侧轴：与主轴垂直方向为侧轴justify开头表示与主轴相关 align开头表示侧轴相关指定容器中弹性元素的排列方式，设置主轴方向 row 默认值，弹性元素在容器中水平排列 从左向右 row-reverse 默认值，弹性元素在容器中水平排列 从右向左 column 弹性元素纵向排列 自上向下 column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行 nowrap:默认值
使用flex布局实现,7种经典布局案例
baidu_21349635的专栏
09-01 4422
flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *!/* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 */
flex 九宫格布局实现
ZTao-z的博客
11-18 1480
flex 九宫格实现
flex布局实例
黑胡子大叔的博客
07-14 632
flex布局实例
【Flex】利用flex布局一个九宫格
羊羊羊羊羊羊羊的博客
02-20 678
【代码】【Flex】利用flex布局一个九宫格。
CSS实现九宫格布局
qq_45814648的博客
01-30 849
htmlcss。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值