大本赢彩票开户

码迷,xscp18.com
大本赢彩票开户 > 其他好文 > 详细

flex布局

时间:2019-11-01 00:05:32      阅读:23      评论:0      收藏:0      [点我收藏+]

标签:http   决定   缩小   com   分配   ref   属性   文字   水平   

flex布局

注意点:

  • 任何一个容器都可以指定为flex布局
  • 行内元素也可以使用flex布局:display:inline-flex
  • webkit内核的浏览器,必须加上-webkit前缀:display:-webkit-flex;
  • ** 父元素设置flex布局后,子元素的float、clear、vertical-align属性将失效

基本概念

容器:flex容器

Flex项目:所有flex容器的子元素

容器属性(6个)

flex-direction属性:决定主轴的排列方向

row:默认值,主轴为水平方向,起点为左端
row-reverse: 主轴为水平方向,起点为右端
column:主轴为垂直方向,起点为上端
column-reverse: 主轴为垂直方向,起点为下端

flex-wrap属性:如果一条轴线放不下,如何换行

nowrap:默认值,不换行
wrap: 换行,第一行在上方
wrap-reverse:换行,第一行在下方

flex-flow属性:flex-direction属性和flex-wrap属性的简写形式

row nowrap : 默认值

justify-content属性:主轴上的对齐方式

flex-start: 左对齐
flex-end: 右对齐
center: 水平居中
space-between: 两端对齐,项目之间的间隔都相等
space-around: 环绕对齐,项目之间的间隔是两端间隔的两倍

align-items:交叉轴上的对齐方式

flex-start: 交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴居中对齐
baseline:第一行文字的基线对齐 
stretch:默认值,拉伸对齐。子项目将占满整个容器高度

align-content: 多根轴线时,对齐方式,类似justify-content或 align-items

项目属性(6个)

order:项目排列顺序,数字越小越靠前,默认为0

flex-grow:项目放大比例,默认为0,既该项目占剩余空间的比例

flex-shrink:项目缩小比例,默认为1

flex-basis:项目在分配多余空间之前,项目占据的主轴空间

flex:flex-grow, flex-shrink 和 flex-basis的简写,默认值为:0 1 auto

align-self:单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

auto:默认值 
flex-start
flex-end
center
baseline
stretch

flex布局

标签:http   决定   缩小   com   分配   ref   属性   文字   水平   

原文地址:https://www.cnblogs.com/nanhuaqiushui/p/11774257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
           
© 2014 xscp18.com 版权所有 京ICP备13008772号-2
迷上了代码!
万国彩票开户 博冠彩票开户 金沙彩票投注 鑫乐彩票开户 优博彩票开户 天津福利彩票开户 盛源彩票开户 优游彩票开户 九号彩票开户 皇冠彩票开户