1.1 列布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。

1.1 伸缩布局

   CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

如下图,学习新的概念:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

1、必要元素:

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴,也可改变方向

2、各属性详解

a、flex-direction调整主轴方向(默认为水平方向)

该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

row 水平方向

reverse-row 反转

column 垂直方向

reverse-column 反转列

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

flex-start、 起点对齐

flex-end、  终点对齐

center、    中间对齐

space-around、 环绕

space-between  两端对齐

c、align-items调整侧轴对齐

align-items: 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

flex-start  起点对齐

flex-end  终点对齐

center 居中 垂直居中

stretch 拉伸  设置拉伸,高度不能固定

d、flex-wrap控制是否换行  (控制是否换行)

flex-wrap:nowrap 不换行

flex-wrap:wrap 换行

e、flex控制子项目的缩放比例

不指定flex 属性,则不参与分配.

f、order控制子项目的排列顺序

此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值可参考示例源码

应用场景3-携程旅行

CSS3 布局的更多相关文章

  1. 针对移动设备的CSS3布局

    针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

  2. 学习笔记 第十一章 CSS3布局基础

    第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形 ...

  3. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  5. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  6. 说说css3布局

    使用float属性或position属性布局的缺点 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...

  7. CSS3基础(3)——CSS3 布局属性全接触

    一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现 ...

  8. CSS3布局样式

    CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...

  9. CSS3布局篇(多列布局)

    我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...

随机推荐

  1. 卡特兰数 Catalan数 ( ACM 数论 组合 )

    卡特兰数 Catalan数 ( ACM 数论 组合 ) Posted on 2010-08-07 21:51 MiYu 阅读(13170) 评论(1)  编辑 收藏 引用 所属分类: ACM ( 数论 ...

  2. 在浏览器中输入Google.com并且按下回车之后发生了什么?

    作者: skyline75489  来源: skyline75489的博客  发布时间: 2015-03-26 16:57  阅读: 4163 次  推荐: 23   原文链接   [收藏]      ...

  3. 委托、Lambda表达式

    本文来自:http://wenku.baidu.com/link?url=o9Xacr4tYocCPhivayRQXfIc9kOZeWBwPn2FZfeF19P4-8YX5CMXs74WB-Y8t0S ...

  4. Hive的UDF实现及注意事项

    Hive自身查询语言HQL能完毕大部分的功能,但遇到特殊需求时,须要自己写UDF实现.下面是一个完整的案例. 1.eclipse中编写UDF ①项目中增加hive的lib下的全部jar包和Hadoop ...

  5. 【gcd+数学证明】【HDU1722】 CAKE

    Cake Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. VS2013报表设计常用表达式

    一.页眉 1."日期"表达式:="日期: "& Today.ToShortDateString() 效果: 2.格式化日期:="日期: &qu ...

  7. android——fragment详解

    在android开发过程中,如果使用到了导航栏.那么不可避免的就需要使用fragment来处理界面.闲着没事,就详解一下Framgent的使用方法吧. 难得写一次.本人 shoneworn shone ...

  8. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. Hibernate学习——映射关系

    学习记录 O(∩_∩)O . 如果你恰巧路过,希望你能停下脚步瞧一瞧,不足之处望指出,感激不尽~ 使用工具: 1.eclipse   2.hibernate压缩包(hibernate_4.3.11)  ...

  10. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...