快速使用CSS 弹性盒子
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现；2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。:
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
1：最基本的
<style>/*body {direction: rtl;/*设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变 ，整体从右到左}*/.flex-container{display: flex;display: -webkit-flex;width: 450px;height: 150px;background-color: darkcyan;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>2：flex-direction使用（弹性子元素在父容器中的位置）
<style>/*flex-direction的值有:row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。*/.flex-container{display: flex;display: -webkit-flex;width: 450px;background-color: darkcyan;flex-direction: row-reverse;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>3：justify-content 的使用（弹性子元素在父容器中的位置） 如下：盒子居中显示
<style>/*justify-content属性flex-start：从左到右排列flex-end：从右到左排列center：中间开始排列space-between：平分space-around：平分，且两边占1/2*/.flex-container{display: flex;display: -webkit-flex;width: 500px;background-color: darkcyan;justify-content: center;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>4：align-items的使用（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）如下：从底部开始显示
<style>/*align-items 属性:侧轴（纵轴）方向上的对齐方式。flex-start： 顶部开始flex-end： 低部开始center 居中baseline 弹性盒子元素的行内轴与侧轴为同一条stretch*/.flex-container{display: flex;display: -webkit-flex;width: 500px;height: 211px;background-color: darkcyan;align-items: flex-end;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>5：flex-wrap的使用（定弹性盒子的子元素换行方式）如下：自动换行
/*flex-wrap 属性nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行wrap-reverse -反转 wrap 排列。*/.flex-container{display: flex;display: -webkit-flex;width: 300px;background-color: darkcyan;flex-wrap:wrap;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>6：order的使用（定弹性盒子的子元素的排列顺序）如下：居中
<style>/*order 属性用整数值来定义排列顺序，数值小的排在前面。可以为负值*/.flex-container{display: flex;display: -webkit-flex;width: 465px;-webkit-flex-wrap: wrap;flex-wrap: wrap;background-color: darkcyan;align-content: center;-webkit-align-content: center;}.flex-item{width: 130px;height: 125px;margin: 10px;background-color: yellowgreen;}.tow{order: -1;-webkit-order: -1;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>7：margin 属性，完美居中
<style>/*margin 属性完美居中*/.flex-container{display: flex;display: -webkit-flex;width: 365px;background-color: darkcyan;height: 155px;}.flex-item{width: 130px;height: 125px;margin: auto;background-color: yellowgreen;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div></div></body>8：align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
<style>/*align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。* flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。stretch:如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。*/.flex-container{display: flex;display: -webkit-flex;width: 465px;height: 365px;background-color: darkcyan;}.flex-item{width: 130px;min-height: 100px;margin: 10px;background-color: yellowgreen;}.one{align-self: flex-start;}.tow{align-self: flex-end;}.three{align-self: center;}.four{align-self: stretch;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div><div class="flex-item four">盒子4</div></div></body>9:flex 用于指定弹性子元素如何分配空间。
<style>/*flex 属性用于指定弹性子元素如何分配空间。比例分配*/.flex-container{display: flex;display: -webkit-flex;width: 400px;height: 165px;background-color: darkcyan;}.flex-item{margin: 10px;background-color: yellowgreen;}.one{flex: 2;-webkit-flex: 2;}.tow{flex: 1;-webkit-flex: 1;}.three{flex: 1;-webkit-flex: 1;}</style><body><div class="flex-container"><div class="flex-item one">盒子1</div><div class="flex-item tow">盒子2</div><div class="flex-item three">盒子3</div></div></body>弹性盒子在开发中常常用得到，前端，app端；弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。通过以上学习，希望你能更好的学习弹性盒子。
快速使用CSS 弹性盒子相关推荐
- css 弹性盒子 flex布局
目录 css弹性盒子flex 布局 什么是flex 常见父项属性 概念与案例 主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
- CSS 弹性盒子布局详解
CSS 弹性盒子 弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...
- CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
- CSS 弹性盒子布局使用方法介绍
标题 CSS 弹性盒子布局 CSS 属性 应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...
- 【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩 ...
- css --- 弹性盒子
左右两侧按1:1自适应,中间固定宽度500px // CSS /* 首先定义 container ,关注display */ /* webkit 是Chrome.Safari 的浏览器前缀 */ .c ...
- css 弹性盒子200304
弹性盒 主轴 侧轴 display: flex|inline-flex 例子 弹性盒子 display:flex 效果相当于让子元素浮动并且让父元素清除了浮动 inline-flex的效果 宽度由内容 ...
- CSS弹性盒子布局flex
flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...
- css弹性盒子--弹性布局flex-grow、flex-shrink、flex-basis详解
flex-grow.flex-shrink.flex-basis三个属性的作用: 在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的. (注意:这三个属性都是在子元素上设置的,下面小编 ...
最新文章
- 小编教您Springboot项目中异常拦截设计与处理
- Lamp（fastcgi）环境的搭建
- Android媒体播放框架MediaSessionCompat介绍实践
- python人脸识别毕业设计-基于Python的人脸识别系统研究.docx
- Mycat安全_SQL拦截黑名单---MyCat分布式数据库集群架构工作笔记0034
- 荣耀路由器w831刷linux,华为荣耀路由器登录入口：荣耀路由器WS831设置指南【图解】...
- 22计算机408考研—数据结构—线性表、栈、队列、数组
- linux iozone测试工具,linux系列之常用工具：iozone测试磁盘性能
- CwRsync | Windows与Windows之间同步备份配置详解
- 对计算机硬盘格式化,电脑硬盘格式化和快速格式化的区别
- matlab 对话框大小调整,matlab界面设计---对话框设计
- 钉钉群机器人关键词自动回复_企业微信群机器人怎么用？企业微信群机器人有什么功能？...
- 用xpath解析网页
- python技术文档
- acwing 2058. 笨拙的手指
- 视频|《8问》浙江大学张宏鑫：边缘计算或许是区块链的福音
- 数字证书X509格式标准简介
- ios Mac下的SVN工具：Cornerstone与Versions和使用subversion管理iOS源代码
- JS点击列表li获取li的id
- 【无人机】【2019.07】未来无线网络中多个无人机基站的定位