弯曲方向
将flex-direction允许您更改Flex容器的轴。默认值flex-direction是row。使用此值，Flex项目将按照方向布置writing-mode。同样，这意味着默认情况下从左到右，从上到下。其他值如下：
row-reverse：交换主开始和主端。如果写入模式是从左到右，则Flex项目现在从右到左排列。
列：交换主轴和交叉轴。如果书写系统是水平的，则Flex项目现在是垂直布局的。
column-reverse：与列相同，但相反。
justify-contentFlex
Containers的属性调整主轴上Flex项目的位置。可能的值是：
flex-start(默认)
柔性端
中央
空间之间
空间的周围
这里我们设置justify-content为center使Flex项目在主轴上居中
对齐项
align-items是补充justify-content。align-items调整Flex项在十字轴上的定位方式。可能的值是：
flex-start(默认)
柔性端
中央
底线
伸展
这里我们设置align-items为center使Flex项目在Cross
Axis上居中
stretch也很简单：它会导致Flex项目从Cross
Start延伸到Cross End。baseline导致Flex项目沿其基线对齐。基线是根据Flex项目的内容计算的
柔性包装
到目前为止，每个Flex
Container只有一条Flex Line。使用flex-wrap您可以创建具有多个Flex
Lines的Flex容器。flex-wrap的可能值是：
nowrap(默认)
包裹
总结反向
如果flex-wrap设置为wrap，如果在一条Flex
Line上没有足够的空间，Flex Items将包裹到其他Flex Lines上。在横轴方向上添加了额外的Flex线。
wrap-reverse与换行相同，只是新的Flex
Lines将在Cross Axis上以相反的方向添加。
订购
order是最简单的。设置Flex项目的订单会在呈现时调整其顺序。在此示例中，我们将order一个Flex项设置为-1，使其在任何其他Flex项之前显示。
余量
您可能熟悉正常作用的margin:
auto;。在Flexbox中它可以做同样的事情，但它更强大。“自动”保证金将吸收额外空间。它可用于将Flex项目推送到不同的位置。
这里我们margin-right:
auto;在第一个Flex
Item上声明，导致所有额外空间被吸收到该元素的右侧：
在这里，我们margin:
auto;用来实现CSS布局的圣杯：真正的垂直居中
html代码
class="flex-container">
<
class="hljs-name" style="-webkit-font-smoothing: antialiased;
color: rgb(250, 61, 88);">div class="flex-item">I'm
centered!
class="hljs-name" style="-webkit-font-smoothing: antialiased;
color: rgb(250, 61, 88);">div> <
class="hljs-regexp" style="-webkit-font-smoothing: antialiased;
color: rgb(227, 136, 0);">/div>
CSS代码
.flex-container {
display: -webkit-flex;
display: flex;
width: 300px;
height: 240px;
background-color: Silver;
}
.flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: auto;
}
flex：[编号]
此语法指定一个数字，表示此Flex项应采用的可用空间的比率。
在此示例中，第一个Flex项占用了2/4的可用空间，另外两个Flex项占用了每个可用空间的1/4：
流动模型
因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
绝对定位的
z-index
如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
float的特性
1.破坏性
被设置了float的元素会脱离文档流
float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单——为了要实现文字的环绕效果。
2.包裹性
div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
3。清空格
正常的img中间是会有空格的，因为多个
标签会有换行，而浏览器识别换行为空格，这也是很正常的
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质
vertical-align 属性。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
可能的值
值
描述
baseline
默认。元素放置在父元素的基线上。
sub
垂直对齐文本的下标。
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素的顶端对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
把元素的顶端与行中最低的元素的顶端对齐。
text-bottom
把元素的底端与父元素字体的底端对齐。
length
%
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit
规定应该从父元素继承 vertical-align 属性的值。
网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。
display:table=>相当于“table”标签； display:table-row=>相当于“tr”标签； display:table-cell=>相当于“td”标签；
、table-cell同样会被其他一些CSS属性破坏，例如float,
position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。
4、设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
calc()的运用
为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，
width: calc(100% - 140px);
这句代码的含义是：width的值等于
它的父元素的总宽度—140px。
这样的话，容器就不会存在被撑爆的问题。
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
block
分享：
喜欢
0
赠金笔
加载中，请稍候......
评论加载中，请稍候...
发评论
登录名： 密码： 找回密码 注册记住登录状态
昵 称：
评论并转载此博文
发评论
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
