弹性盒模型（部分布局超好用）
使用弹性盒模型的目的：
1.提供一种更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的。
2.让容器有能力改变项目的宽高，以填满可用的空间。
3.布局与方向无关
属性：display:flex(适用于父级元素)
flex-direction(写在父级css中作用于子级):
检索，子级在盒子中的位置（子级的排列顺序）
值：
row 横向，左到右
row-reverse 反横向 ，右到左
column 纵向，上到下
row-reverse 反纵向，下到上
flex-wrap(写在父级作用于子级)：
检索，子级是否超出父级（换不换行）
值：
nowrap 不换行
wrap 换行
wrap-reverse 反向wrap排列
justifl-content(写在父级，作用于子级)：
检索弹性盒子在主轴（x）方向上的对齐方式
值：
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端居左居右中间等间距
spance-around N个盒子个数分布为N个空间，盒子在各空间内居中
align-items(写在父级，作用与子级)：
检索盒子在Y轴上的对齐方式
值：
flex-start 顶置
flex-end 置底
center 居中
baseline 与基线对齐
stretch 置顶加置底，高度受到min-height与max-height限制
align-content(写在父级作用于子级)：
检索 换行时对齐方式
值：
flex-start 置顶
flex-end 置底
center 居中
space-between 上下置顶置底上下居中
space-around N个盒子个数分布为N个空间，盒子在各空间内居中
order(写在子级)：
排列顺序
值（值越小排位越靠前）：阿拉伯数字
flex-grow(写在子级)：
分配剩余空间
值（值越大分配越多）：阿拉伯数字
弹性盒模型（部分布局超好用）相关推荐
- css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
- 弹性盒模型 Flex
1. 什么是弹性盒模型 传统布局基本依靠display float position来完成,有些特殊的布局写起来不太方便. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
- 从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- 弹性盒模型响应式布局
1.移动端布局与PC端的区别 PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的. ...
- 【转载】前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 弹性盒模型实现两栏布局
目录 弹性盒模型实现两栏布局 弹性盒模型实现两栏布局 思路: 首先对html,body设置高度为100%,并且对body设置为相对定位,把头部和底部,用定位的方式固定好,使用弹性盒模型,中间占据剩余的 ...
最新文章
- 动态sql拼接单引号与 变量赋值
- IIS7.5 中启用rest服务，Delete、Put
- boost::graph模块实现读写graphml的测试程序
- [转]Linux系统下yum和apt-get的区别
- 防火墙（4）——iptables（2）增加修改规则-A -R
- 悬崖边上的舞者，记7.2生产数据库灾难事件
- MAC和XCODE常用快捷键
- opencv 模板匹配_详细剖析模板匹配
- 搭建一个网站的价格以及步骤全面解读
- MYSQL存储过程的简单运用，包括传值、返回值、返回集合
- 拼多多优惠券bug造成千万损失引发的优惠券安全思考
- python-安居客-郑州二手房销售信息抓取
- ppt的字母上面插入尖号
- 实时网速监测app_实时网速安卓下载_实时网速监测安卓app下载-XP软件园
- python写手机脚本脱离电脑_在手机里编写python脚本控制手机
- 移动网络http请求不到数据，wifi下可以
- 用javascript编写网页：1.2css实践：页面布局
- 华为CDN体验及常见问题
- 前端工程师实战开发：CSS样式继承、像素与选择器权重详解
- 安全性测试：以用户登录为例