博客
关于我
2-5 CSS布局2-flex布局(新浏览器)
阅读量:182 次
发布时间:2019-02-28

本文共 2038 字,大约阅读时间需要 6 分钟。

1.容器 container

container表示容器,一般用来做父元素,里面直接的子元素叫做items(项目)。
在这里插入图片描述

2.container样式

让一个元素变成flex容器 ,改变其中item的次序,现在item是弹性盒

1
2
3
.container{   display:flex;}
  • 改变item主轴流动方向
    由于现在是flex-flow(弹性流,与文档流无关)因此默认item的排序方式为从左到右依次排列。
flex-direction: column;/*将盒子次序变为竖列*/

row横向;column竖列;row-reverse反向横向

在这里9插入图片描述

  • 改变折行
    与文档流区分,flex是弹性盒,不会折行,有多少挤多少,可以控制是否折行。
flex-wrap: wrap;

nowrap不折行(默认);wrap-reverse

在这里插入图片描述

  • 主轴对齐方式
    如果item排列不满时,空间往哪里放。
.container{   justyfy-content:flex-start;}

在这里插入图片描述

  • 次轴对齐
.container{   align-items:flex-start;}

在这里插入图片描述

3.flex-item样式

  • item前面加上order:改变container里面的item次序
    默认的order都是0,改变数值后会从小到大排列
  
1
2
3
4
5

给order添加次序之前先命名,冒号后面不能有空格

.item:first-child{     order:100;}/*给item设定次序,表示container中的第一个孩子,冒号中间不能加空格*/.item:nth-child(2){     order:2;}.item:nth-child(3){     order:-3;/*负数是最小的*/}.item:nth-child(4){     order:4;}.item:last-child{     order:5;}
  • item的宽度如何变宽:flex-grow
    不设置宽度的情况一般默认最窄,当空间变大时如何控制宽度item分配
    在这里插入图片描述
/*item多余的空间平均分配*/.item{     height: 50px;  border: 1px solid green;  flex-grow: 1;/*表示的1份,意思为平均分配整行空间*/}
/*多余的空间分成四份,其中一份给1,两份给2,一份给3*//*注意:不是整行分成四份*/.item:first-child{     flex-grow:1;}.item:nth-child(2){     flex-grow:2;}.item:nth-child(3){     flex-grow:1;}

实际应用时:一般前后为0(根据内容调整宽度),中间1(只要有空余全部给中间),0一般可以省略,只需要给中间1即可。

  
logo
导航
头像
.item:nth-child(2){     flex-grow:1;}
  • item空间变窄时:flex-shrink
    当item的原始宽度width被压缩的时候,缩窄的程度可以控制
    当不想宽度变小时:flex-shrink: 0;
.item{     height: 50px;  border: 1px solid green;  width: 150px;/*当item的宽度小于150时,缩窄的多少根据shrink决定*/}.item:first-child{     flex-grow: 1;  flex-shrink: 0;/*0表示就算空间不够也不缩小*/}.item:nth-child(2){     flex-grow:1;  flex-shrink: 100;/*基本由2来缩小*/}.item:nth-child(3){     flex-grow:1;  flex-shrink: 1;}
  • 缩写:其中flex-grow和flex-shrink可以缩写为flex,后面要补全宽度
.item:first-child{     flex: 1 0 100px;  /*flex-grow: 1;  flex-shrink: 0;*/}
  • 某一个item特殊定制:align-self
    item是统一调配的对齐方式的,要在单独的item里面改变其对齐方式
    在这里插入图片描述
.item:nth-child(3){     align-self: flex-end;}

实践

转载地址:http://vfvi.baihongyu.com/

你可能感兴趣的文章
mysql - 视图
查看>>
MySQL - 解读MySQL事务与锁机制
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>
mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>
MySQL Binlog 日志监听与 Spring 集成实战
查看>>
multi-angle cosine and sines
查看>>
Mysql Can't connect to MySQL server
查看>>
mysql case when 乱码_Mysql CASE WHEN 用法
查看>>
Multicast1
查看>>
MySQL Cluster 7.0.36 发布
查看>>
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>
multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
查看>>
mysql cmake 报错,MySQL云服务器应用及cmake报错解决办法
查看>>
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>