flex布局学习记录
来源:互联网 发布:淘宝现在做什么赚钱 编辑:程序博客网 时间:2024/06/12 20:53
推荐阮一峰写的flex布局博客,这里我只是说下自己的学习记录.
flex布局可以实现响应式布局.
兼容性:
实现flex布局,要有父容器和子元素.
将父容器设置为display:flex.
父容器设置为display:flex之后,它的子元素的float,clear,vertical-align属性将失效。
flex容器有两个轴,一条为主轴,一条为交叉轴,主轴和交叉轴与x,y轴类似.
这里只说我常用的属性:
一般情况下会这样设置容器的属性:
flex-flow:row no-wrap; ,这条为缩写属性,row代表从左向右排列.no-wrap表示不换行.
justify-content: flex-start; 这条属性表示主轴上的对齐方式.
align-items:flex-start; 这条属性表示交叉轴上的对齐方式.
子元素上的属性:
order: 0; 这条属性表示项目的排列顺序,子元素将会按order的值从小到大按顺序排列,默认值为0.如果将某个子元素的order属性设为-1,则这个子元素排在第一位.
flex-grow;表示子元素的放大比例.默认为0,表示如果存在多余空间,子元素也不会放大.
flex-shrink;表示子元素的缩小比例,默认为1,表示如果容器空间变小时,子元素也会按比例缩小,如果某个子元素设置为0,则其他子元素会缩小,这个子元素不会缩小.
flex-basis;一般不需要设置,默认值为auto.
flex;是flex-grow flex-shrink flex-basis3个属性的缩写,默认值为0,1,auto.我一般设置为flex:1,等同于flex:auto(flex:1 1 auto);
我就记录自己常用的属性,不常用的属性我觉得没必要记录。
- flex布局学习记录
- Flex 学习 Flex布局 弹性布局
- Flex布局学习笔记
- Flex布局学习笔记
- 学习flex布局
- Flex布局学习札记
- Flex布局学习总结
- flex布局学习笔记
- flex布局初步学习
- flex弹性布局学习
- flex布局学习
- Flex 学习笔记 之 flex 页面布局
- Flex Box布局学习- 语法
- Flex(弹性布局)学习笔记。
- flex布局的学习总结
- css flex布局学习地址
- Flex 布局之学习笔记
- DIV+CSS 布局学习记录
- iOS程序开发概览
- 非循环单链表
- NOIP2016提高A组集训第11场11.9 总结
- IntelliJ Idea 常用快捷键列表
- Android 动画之LayoutAnimation
- flex布局学习记录
- 396. Rotate Function
- 如果软件测试是门艺术,软件测试工程师就是艺术家 -- 浅析ZStack是如何做智能软件测试
- Android studio断点调试(全在这里)
- 搭建基于Linux6.3+Nginx1.2+PHP5+MySQL5.5的Web服务器全过程(参考)
- 洛谷 P1137 旅行计划
- IOS开发 POST请求数据 乱码问题
- C 笔记
- 栈的构造