追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


CSS-弹性伸缩布局(新版本)

2019-7-3 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

使用新版本的弹性伸缩布局
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: CSS-弹性伸缩布局(新版本) « 如何提高用户的安全感? | 视觉层级强力拆解»


订阅Rss