<
div
class
=
"
inner
"
>
1
</
div
>
<
div
class
=
"
inner
"
>
2
</
div
>
<
div
class
=
"
inner
"
>
3
</
div
>
<
div
class
=
"
inner
"
>
4
</
div
>
</
div
>
.box {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
width: 420px;
height: 420px;
.inner {
width: 300px;
height: 50px;
background-color: red;
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-U...
今日需要做一个排行榜。由于屏幕高度不确定，且取的数据条数不确定，又不想写JS实现，就用flex布局实现了。在实现的过程中还是遇到了一个坑的。废话不多说，开始撸代码！假设我们有一个父DIV，div里有3个p标签，我们想均分浏览器窗口的高度。如果对flex布局不清楚的童鞋，请先看这篇文章。flexbox弹性伸缩盒布局教程* { padding: 0; margin: 0; box-sizing: b...
现在都很流行流式布局display:flex;，但是就是老是记不住他们的类型，今天抽空梳理咯一下父元素与子元素的他们各自拥有的属性（红色部分是我经常使用到的）
父元素拥有的属性
1、flex-direction 设置主轴对齐方式
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。...
flex布局
前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效；
1.基本概念
使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
RT，做网站中有多个单选按钮，想让其均匀分布，网上找了好多，终于找到了解决方案。
复制代码代码如下: <div xss=removed> <div xss=removed> <input type=”radio” checked=”checked”/>男 </div> <div xss=removed> <input type=”radio”/>女 </div> </div>
这样，通过将内部div
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。
然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为两类，一类是给flex容器设置的，一类是给flex子元素设置的，本文在介绍一些典型场景实现的同时也会顺带讲解部分属性，当然更详细的内容可以阅读MDN上的教程。接下来需要使用到flex-grow属性，这个是flex子元素上的属性，用来控制容器还有空间剩余时，flex子元素怎么进行扩展，默认值是0，也就是不扩展，子元素会显示为它们默认的大小，这个所谓的默认大小分几种情况：
1、如果子元素的另一个属性flex-basis设置了不为auto的具体数值，那么无论元素有没有设置具体大小都
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到float属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在float: center的写法，那么text-align: center、verticle-align: center是否...
