前端三剑客之CSS--flexable layout box 经典解读

前端三剑客之CSS--css3 flexbox layout(弹性布局)--完全解析

一、背景--                                                                                                                                            
? Flextbox Layout(弹性盒布局或伸缩盒布局),提供了一种更加有效的方式去布局、对齐和给                
容器中的子元素分配空间,即使他们的尺寸未知或者是动态改变的。 看看里面有个flex就能想象出来。

? Flexbox layout背后的设计理念:赋予容器去改变他的子元素的宽、高、排列顺序的能力,从而可以    
更好的填充可用空间,尤其对各种各样的设备和屏幕尺寸提供了便利的方式去布局。一个具有flex特     
性的容器可以去拉伸他的子元素去填充可用的自由空间,也可以收缩他的子元素防止溢出。

? 更重要  
的一点,flextbox layout 的布局方向也是不固定的。这点与我们以前的布局是不同的。比如:block
是垂直布局的,而inline是水平布局的。 对那些可以工作良好的页面来说,他们在支持庞大或者复杂
的应用方面缺乏灵活性。尤其当面对设备的方向、尺寸、缩放等等方面发生改变的时候,这种缺点更
加明显。
二、基本知识
flexbox是一个完整的模块,而不是一个单一的属性。
flexbox加入了大量的属性。这些属性一部分用在容器上(父元素,一般称之为 flex container),而另外
的一些是用在子元素上(一般称之为 flex items. 弹性项目)。
一般情况下,flex itmes 要么沿着 main axis 布局(从主轴起点到主轴重点),要么沿着 cross axis 布局
(从侧轴起点到侧轴重点)。

主轴(main axis) : 弹性容器的主轴是最主要的轴,flex items会沿着这条轴
被布局。有一点需要注意:主轴不一定总是水平的,他的方向由 flex-direction 属性的值来决定。
(后面后细讲)
主轴起点(main start)和主轴终点(main end):弹性容器中的 flex items 会从 主轴起点
开始 到主轴重点结束 布局。
主轴长度(main size):flex item的宽或高就是主轴长度。到底是宽还是
高,由谁沿着主轴的方向来决定。
侧轴(cross axis):垂直于主轴的轴就是侧轴。侧轴的方向由主轴来
决定。
侧轴起点(cross start )和侧轴终点(cross end):弹性行(flex lines)从侧轴起点开始到侧轴重点
结束。
侧轴长度(cross size):伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的
侧轴长度属性是「width」或「height」属性,由哪一个沿着着侧轴方向决定。
***************************************************************************************************************************

***************************************************************************************************************************

原文地址:https://www.cnblogs.com/xiaoyangaibianchen/p/9896229.html

时间: 2024-11-10 15:15:55

前端三剑客之CSS--flexable layout box 经典解读的相关文章

前端三剑客HTML+CSS+JavaScript

HTML(超文本标记语言)负责网页的结构 CSS(层叠样式表)负责网页的样式(比如颜色/字体/边框等属性设置) JavaScript(脚本语言)负责网页的行为(点击/输入输出/滚动等等) HTML部分: html文档结构:整个html文档一般都包括header/body两部分: header头部标签主要包含html的描述性内容: title标签是网页在浏览器标签栏上显示的标题 meta标签是网页的原信息 link标签用来链接其他内容,引用外部css样式,就是通过link标签 script标签是调

【前端优化之拆分CSS】前端三剑客的分分合合

几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试</div> 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异常复杂,onclick也不好使了,所以js也分离开了,经典的html+css+javascript结构分离逐步清晰,三种代码各司其职

前端开发规范-CSS规范

前端开发规范-CSS规范 1.通用约定 (1)代码组织 以组件为单位组织代码段: 制定一致的注释规范: 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔: 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动: 良好的注释是非常重要的.请留出时间来描述组件(component)的工作方式.局限性和构建它们的方法.不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的. 提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模

【Css】Layout布局(一)

看下图: css框模型(Box Model),也有叫做盒模型的.规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. element元素,也是内容的主体: padding内边距,也右称为填充的: border边框: margin外边距. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 背景应用于由内容和内边距.边框组成的区域. 可以这样设置框模型的宽度: 1 #box {

【前端学习】CSS3--盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-). 一.box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分

前端三剑客 页面模板 HTML标签

前端 什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript. 前端开发技术栈 HTML 超文本标记语言 负责完成页面的结构 文件后缀:.html .htm "超文本"指的是页面内可以包含图片.链接.程序等非文字元素 CSS 级联样式表 负责页面的风格设计,样式.美观 文件后缀:.css JavaScr

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们