2019-7-3 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
使用新版本的弹性伸缩布局
display使用弹性伸缩盒
direction容器盒内元素的排列顺序
flex-wrap设置无法容纳时，自动换行
justify-content 伸缩项目的排列方式
align-items 处理额外空间
align-self 单独处理一个伸缩项目的额外空间
flex 控制伸缩容器的比例分配
order 设置伸缩项目出现的位置
dislpay
值：
flex 将容器盒作为块级弹性伸缩盒显示。
inline-flex：将容器盒作为内联级弹性伸缩盒显示。
实际现实中 这两个值没区别。
direction
容器盒内元素的排列顺序
值：
row:从左到右排列
row-reverse：从右到左排列
column：从上倒下排列
column-reverse从下到上排列
flex-wrap
设置无法容纳时，自动换行
值：
nowrap：不换行
wrap：自动换行
wrap-reverse：自动换行，方向和wrap相反
下图为正常排序
使用wrap-reverse后缩小浏览器时:
justify-content
伸缩项目的排列方式
值：
flex-start：伸缩项目以起始点靠齐
flex-end：伸缩项目以结尾靠齐
center：以中心点靠齐
space-between：伸缩项目平均分布
space-around：同上但两段保留一般的空间
实例：使用space-around的排列效果
align-items
处理额外空间
值：
flex-start：以顶部为基准，清理底部的额外空间
flex-end：以底部为基准，清理顶部的额外空间
center：以中间为基准，清理上下部分的额外空间
baseline：以基线为基准，清理额外的空间
stretch：伸缩项目填充整个容器，默认值
align-self
处理额外空间
值：与align-items的值一样，需要用nth-child（）设置某一个需要处理的伸缩项目
flex
设置伸缩项目分配比例
p:nth-child(1)
{
flex: 1;
}
p:nth-child(2)
{
flex: 2;
}
p:nth-child(3)
{
flex: 2;
}
p:nth-child(4)
{
flex: 1;
}
order
设置伸缩项目出现的位置
p:nth-child(1)
{
order:2;
}
p:nth-child(2)
{
order:3;
}
p:nth-child(3)
{
order:4;
}
p:nth-child(4)
{
order:1;
}
---------------------
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。