Flex
结合具体实例迅速掌握flex的用法
king.sheng
这个作者很懒,什么都没留下…
展开
-
Flex实战七(项目属性:order、flex-grow、flex-shrink、flex-basis、flex综合属性、align-self、margin)
order属性定义项目的排列顺序,数值越小,排列越靠前,默认为0 .item{order: } flex-grow属性定义项目的放大比例,默认为0,及如果存在剩余空间也不放大。 .item{flex-grow: ;/* default 0*/} flex-shrink属性定义了项目的缩小比例,默认为1,及如果空间不足,该项目将缩小 .item{flex-shrink: ;/* default 1...原创 2020-03-16 15:51:17 · 301 阅读 · 0 评论 -
Flex实战六(容器属性align-items)
align-items属性定义项目在交叉轴上如何对齐。(上中下) .box{align-items: flex-start | flex-end | center | baseline |stretch} flex-start: 交叉轴的起点对齐 flex-end:交叉轴的终点对齐 center:交叉轴的中点对齐 baseline: 项目的第一行文字的基线对齐 stretch(默认值):如果项目未...原创 2020-03-16 15:01:38 · 332 阅读 · 0 评论 -
Flex实战五(容器属性justify-content)
justify-content属性定义了项目在主轴上的对齐方式(左中右) .box{justify-content: flex-start | flex-end | center | space-between | space-around} flex-start:默认值 左对齐 flex-end:右对齐 center:居中 space-between:两端对齐,项目之间间隔都相等 space-a...原创 2020-03-16 14:36:06 · 252 阅读 · 0 评论 -
Flex实战四(容器属性flex-wrap)
默认情况下,项目都排在一条线上,flex-wrap属性定义,如果一条轴线排不下,如何换行。 .box{flex-wrap: nowrap | wrap | wrap-reverse} nowrap(默认):不换行 wrap:换行,第一行在上方 wrap-reverse:换行,第一行在下方 <!DOCTYPE html> <html> <head> <...原创 2020-03-16 14:21:36 · 367 阅读 · 0 评论 -
Flex实战三(容器属性flex-direction)
.box{flex-direction: row | row-reverse | column | column-reverse;} flex-direction属性决定主轴的方向:左中右、上中下 row(默认值):主轴为水平方向,起点在左端 row-reverse:主轴为水平方向,起点在右端 column:主轴为垂直方向,起点在上沿 column-reverse:主轴为垂直方向,起点在下沿 ...原创 2020-03-15 17:05:23 · 175 阅读 · 0 评论 -
Flex实战二(表单布局)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>flex表单布局对比</title> </head> <body> <div&g...原创 2020-03-15 16:29:27 · 688 阅读 · 0 评论 -
Flex实战一(概要)
任何一个容器可以指定Flex布局。.box{display: flex;} 行内元素也可以使用flex布局。 .box{display: inline-flex} Webkit内核的浏览器,必须加上-webkit前缀 .box{display: -webkit-flex;/* Safari */ display: flex;} 设置为Flex布局后,子元素的float、clear和vertical...原创 2020-03-15 15:59:14 · 95 阅读 · 0 评论