详解CSS3弹性伸缩盒


Posted in HTML / CSS onSeptember 21, 2020

用途

  • 弹性盒子对于前端web网页布局来说,有着举足轻重的作用,移动端也是如此。掌握了弹性盒子用法,对于目前编写自适应页面很重要。掌握这种布局规则,是一项必备技能。
     

弹性伸缩盒模型说明

详解CSS3弹性伸缩盒

  • 主轴(main axis) 是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end**。
  • 交叉轴(cross axis) 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end**。
  • 设置了 display: flex 的父元素(在本例中是 <section> )被称之为 *flex 容器(flex container)。
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项 ( flex item )
     

常用的属性

flex-direction(指定弹性容器中子元素排列方式)

row 默认值。元素将水平显示,正如一个行一样。
   row-reverse 以相反的顺序。
   column 元素将垂直显示,正如一个列一样。
   column-reverse 与 column 相同,但是以相反的顺序。

flex-wrap (属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。)

nowrap默认值。规定元素不拆行或不拆列。
  wrap规定元素在必要的时候拆行或拆列。
  wrap-reverse规定元素在必要的时候拆行或拆列,但是以相反的顺  序。

align-items 属性定义flex子项在flex容器的当前行纵轴方向上的对齐方式,就是规定上下排行的样式。

stretch 默认值。项目被拉伸以适应容器。
   center 项目位于容器的中心。
   flex-start 项目位于容器的开头。
   flex-end 项目位于容器的结尾。
   baseline 项目位于容器的基线上。

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start 项目位于容器的开头。
  flex-end 项目位于容器的结尾。
  center 项目位于容器的中心。
  space-between 项目位于各行之间留有空白的容器内。
  space-around 项目位于各行之前、之间、之后都留有空白的容器内。

弹性子元素属性

1.order属性

.flex-container .flex-item { order: <integer>; }

<integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

2.align-self设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。(跟那个align-items类似)

以上就是详解CSS3弹性伸缩盒的详细内容,更多关于CSS3弹性伸缩盒的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css3教程之倾斜页面
Jan 27 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
js实现随机数小游戏
2019/06/28 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python简单日志处理类分享
2015/02/14 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python读写csv文件方法详细总结
2019/07/05 Python
Django中Middleware中的函数详解
2019/07/18 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
七匹狼男装广告词
2014/03/21 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
实名检举信范文
2015/03/02 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers