码迷,mamicode.com
首页 > 其他好文 > 详细

对于弹性盒子的基础知识点

时间:2019-05-08 09:28:08      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:设置   containe   shrink   前缀   中间   margin   cti   响应   情况   

flex(弹性)布局:********

以往的网页布局(layout)方式:
方式:基于盒模型,依赖display属性+margin属性+position属性+float属性。特殊布局比较麻烦(比如元素的垂直居中)

2009年w3c推出flex布局。可以简便、完整,响应式的实现网页布局(IE10以上支持)。任何元素都可以使用

一、flex是什么?
flex:flexible box 弹性布局(可以给盒子提供最大的灵活性)
任何容器都可以指定为flex布局
.box{display:flex;}
webkit内核:加浏览器私有前缀 -webkit前缀
.box{display:-webkit-flex;display:flex;}
注意:给盒子设置flex属性之后,资源的float/clear/vertical-align将失效
二、基本概念
2.1:采用flex布局的元素,称为flex容器(flex container)称为容器。他的所有子元素自动成为容器的成员,称为flex项目(flex item)。
2.2:容器默认存在两根轴:水平方向主轴(main axis)和垂直交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start 结束位置交mainend。交叉轴的开始叫做cross start 结束叫做cross end;
2.3:项目(flex item)默认延主轴排列。单个项目(flex item)所占据的主轴空间叫做main size,所占据的交叉轴空间叫做cross size
三、容器属性(6个)
3.1:flex-direction属性:(决定主轴的方向:即项目的排列方向)
语法:.box{flex-direction: row | row-reverse | column | column-reverse}
4个默认值:
row(默认):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上端
column-reverse:主轴为垂直方向,起点在下端
3.2:flex-wrap:默认情况,项目都是排在一条线(轴线)上。而flex-wrap属性定义:如果一条线排不下,将如何换行
语法:.box{flex-wrap: nowrap | wrap wrap-reverse}
3个默认值:
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行第一行在下方
3.3:flex-flow:是flex-direction和flex-wrap属性的简写形式。默认值为:row nowrap;
语法:.box{flex-flow: flex-direction | flex-wrap}
3.4:justify-content:定义项目在主轴上的对齐方式
语法:.box{justify-content: flex-start | flex-end | center | space-between | space-around}
5个默认值(假设方向自左向右 row 只跟主轴相关):
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐项目之间的间隔相等
space-around:每个项目两侧间隔相等。项目之间的间隔比项目与盒子边框的间隔大一倍
space-evenly:中间间隔全部相等
3.5:align-items:定义项目在交叉轴上的对齐方式(只跟交叉轴方向相关 默认自上而下)
语法:.box{align-items: flex-start | flex-end | center | baseline | strech}
5个默认值:
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐
baseline:项目中第一行文字的基线对齐
strech(默认):如果项目未设置高度或设置为auto,将沾满整个容器的高度
3.6:align-content:定义多根轴线的对齐方式,如果只有一根轴线该属性不起作用
语法:.box{align-content: flex-start | flex-end | center | space-between | space-around | stretch}
6个默认值:
flex-start:与交叉轴起点对齐
flex-end:与交叉轴终点对齐
center:与交叉轴中心点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:与交叉轴两侧的间隔相等,所以轴线之间的间隔是轴线与盒子边框间隔的两倍
stretch(默认值):轴线沾满整个交叉轴
四、项目(flex item)属性
4.1:order:定义项目的排列顺序(数值越小越靠前[主轴开始的方向],默认为0)
语法:.item{order: number;}
4.2:flex-grow:定义项目的放大比例.默认为0.如果存在剩余空间也不放大。
语法:.item{flex-grow: number;}
4.3:flex-shrink:定义项目的缩小比例。默认值为1,如果空间不足该项目将缩小
语法:.item{flex-shrink: number;}
4.4:flex-basis:定义在分配多余空间之前,项目所占的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余的空间。默认为auto,即项目本来大小。
语法:.item{flex-basis: length(200px或者auto);}
4.5:flex:是flex-grow,flex-shrink,flex-basis简写。默认值:0 1 auto;
flex: auto;(相当于1 1 auto;)
flex: none;(相当于0 0 auto;)
4.6:align-self:定义单个项目与其他项目不一样的对齐方式。可以覆盖align-items。默认值是auto,表示继承父元素的align-items属性。如果没有父元素等同于stretch
语法:.item{align-self: auto | flex-start | flex-end | center | basline | stretch}

对于弹性盒子的基础知识点

标签:设置   containe   shrink   前缀   中间   margin   cti   响应   情况   

原文地址:https://www.cnblogs.com/wj000/p/10829334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!