您的位置：首页 > Web前端 > CSS

css复习及flex布局

2017-03-08 18:03 148 查看

flex布局是用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

设为flex布局的子元素的float clear 和vertical-align等属性将失效

只要将display 设为flex即可

采用flex布局的元素，称为flex容器flex container 他的所有子元素自动称为容器成员，称为flexitem

容器中默认存在两根轴:水平的主轴main axis和垂直的交叉轴cross axis

主轴的开始位置叫做main start 结束位置叫做main end

交叉轴的开始位置叫做cross start 结束位置叫做cross end

项目默认沿主轴排列

单个项目占据的主轴空间叫做main size 占据的交叉轴空间叫做cross size

容器的属性

flex-direction 属性决定主轴的方向(即项目的排列方向)

flex-wrap 项目都排在一条线上 flex-wrap属性定义如果一条轴排不下如何换行

justify-content属性定义了项目在主轴上的对齐方式

flex-start flex-end center space-between等

align-items 属性定义项目在交叉轴上如何对齐

设置在项目上的属性有:

order:定义项目的排列顺序数值越小排列越靠前默认为0

flex-grow属性定义项目的放大比例默认为0

flex-shrink属性定义了项目的缩小比例默认为1

align-self属性允许单个项目与其他项目不一样的对齐方式

兼容移动设备的显示效果

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

width=device-width 宽度等于当前设备的宽度
intial-scale 初始的缩放比例默认为1.0

minimum-scale 允许用户缩放到的最小比例

maximum-scale 允许用户缩放到的最大比例

user-scalable 用户是否可以手动缩放

设置IE渲染方式默认为最高浏览器的文档模式却是IE8

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!DOCTYPE>声明必须是html文档的第一行位于html 标签之前

指示web浏览器关于页面使用哪个html版本进行编写的指令

<!DOCTYPE html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航