Flex布局让你的布局更完美

Flex布局让你的布局更完美
CSS3 Flex布局
有很多人和我一样吧，刚开始学HTML的时候用的都是传统的布局，有时用心设计的HTML+CSS样式可能由于对方的设备、浏览器的原因，导致用户浏览页面时的显示效果非常丑陋。很早之前W3C为了解决解决这个问题，提出了一种新的方案----Flex（Flexible Box）布局，也就是"弹性布局"，它可以为盒状模型提供最大的灵活性，可以适应不同的页面，就算浏览器怎么变，也不会破坏我们的样式了。不过得注意设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。下面我将大概说下flex是干嘛的。
如图我们想设计的网页样式是这样的

.box1{height: 500px;background: #eee;
}
.box1 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px;float: left;
}

而用户打开的可能是这样

可以看到我们的样式都变了，所以我们为了避免这种情况，可以使用flex布局
如图第二行

.box2{height: 300px;background: #CFF446;display: flex;
}
.box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px;
}

我们可以看到用了flex布局后，就算页面的宽度变了，样式也不会变。
flex容器的属性有6个（建议你们试一下）。
①flex-direction(决定排列方向)：row(左往右)、row-reverse(右往左)、column(上往下)、column-reverse(下往上)

.box2{height: 300px;background: #CFF446;display: flex;flex-direction: row;//row-reverse、column、column-reverse
}
.box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px;
}

②flex-wrap：nowrap(不换行)、wrap(换行，上往下)、wrap-reverse(换行，下往上)

.box2{height: 300px;background: #CFF446;display: flex;flex-wrap: nowrap;//wrap、wrap-reverse
}
.box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px;
}

③flex-flow（是flex-direction和flex-wrap的简写，我就懒得放代码了）
④justify-content：
flex-start(左对齐)

flex-end(右对齐)

center（居中）

space-between(两端对齐，间隔也相等)

space-around(每个元素两侧的间隔相等)

⑤align-items：
flex-start(交叉轴的起点对齐)

flex-end(交叉轴的终点对齐)

center(交叉轴的中点对齐)

baseline（元素的第一行文字的基线对齐，画歪了不必在意（づ￣3￣）づ）

stretch（如果元素未设置高度或设为auto，将占满整个容器的高度）
(下图中元素没设置高度)

⑥align-content(如果只有一根轴线，该属性不起作用)：
stretch(轴线占满整个交叉轴)
flex-start(与交叉轴的起点对齐)
flex-end(与交叉轴的终点对齐)
center(与交叉轴的中点对齐)
space-between(与交叉轴两端对齐，轴线之间的间隔平均分布)
space-around(每根轴线两侧的间隔都相等)
上面我就不演示辣，自己试下。
其实它还有6个项目(注意：不是容器)的属性：
①order
②flex-grow
③flex-shrink
④flex-basis
⑤flex
⑥align-self
我就不说了，自己找资料看下(其实是我懒辣)ಠᴗಠ！

Flex布局让你的布局更完美相关推荐

flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
使用 Flex 布局与其他普通布局的简单对比
最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果. 一.左右 1:1 布局布局: <div class=" ...
display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 两列多行布局
flex 两列多行布局 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; 把这段 ...
flex布局和响应式布局
flex伸缩布局一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局,采用Flex布局的元素,称为flex容器cont ...
Web实现：flex弹性布局三栏自适应布局
效果:整个页面分为三栏,左右两栏都是固定宽度,中间栏根据屏幕大小宽度相应变化. 实现: HTML部分: <!DOCTYPE html> <html lang="en&quo ...
vue垂直布局_基于 Flex 实现两端对齐垂直布局
一般来说布局我们都是水平布局,最多搞个垂直居中.而且对于一些 float . position 好像本身就不太适合垂直布局. 正好前段时间用 weex 做了一个页面,weex 天生基于 flex .且 ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...

Flex布局让你的布局更完美

Flex布局让你的布局更完美相关推荐

最新文章

热门文章

Flex布局 让你的布局更完美

Flex布局 让你的布局更完美相关推荐

最新文章

热门文章

Flex布局让你的布局更完美

Flex布局让你的布局更完美相关推荐