多列布局
-
添加在父元素上的属性
- 分栏的列数 column-count:6; (分为六列)
- 分栏的宽度 column-width:100px; (宽为100px为一列)
- 分栏的间距 column-gap:20px; (列与列之间的间距)
- 分栏的边框 column-rule:2px solid red; (分栏分的每一列加的边框)
-
写在子元素上的
- 合并分栏 column-span:all(所有分栏全部合并) / 1(默认的,不合并)
- 定义页面,区域,列发生中断时元素如何表现 break-inside: auto(元素可以中断) / avoid (元素不能中断)
弹性盒子
用flex布局的元素的父元素: flex容器
用flex布局的元素的父元素的子元素: 项目
(简言之, 将整块转换成弹性盒子的是容器, 容器里面的子元素是项目)
flex容器属性:
1、display:flex;
display:inline-flex; (父元素转换成为弹性盒子容器)
-
inline-flex 类似把父元素转换为行内块元素,会相对于文本的基线对齐,设置两个盒子inline-flex,如果文字大小不一样,那么盒子不会横着对齐显示,一般不常用.
-
注意，设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效。父元素该浮动还浮动.
如果说子元素没有设置高度,那子元素的高度默认是撑满的.给父元素设置弹性盒子,子元素横着排列,因为子元素在弹性盒子里面沿着主轴排列,主轴默然从左到右横着排列. -
如果设置子元素的高度>父元素的高度,可以溢出
如果子元素的宽度之和>父元素的宽度,那么不会溢出也不会换行显示,因为现在的主轴是水平的,所以子元素的水平宽度会被压缩,这就是弹性的体现. -
在弹性布局里面,所有的行内元素都支持宽高,所有的行内元素自动变成了横着排列块元素,块元素的各种属性,行内元素都能用.
2、flex-direction属性 决定主轴的方向（即项目的排列方向）
- flex-direction属性值:
- row（默认值）
- row-reverse (横着反向)
- column (垂直为主轴,竖着排列)
- column-reverse(竖着反向)
3、flex-wrap属性，定义子元素是否换行/列显示
- flex-wrap的属性值:
- nowrap（默认值）
- wrap (换行)
- wrap-reverse(换行之后再反向);
想要看到换行和换列效果的时候,条件时父元素的空间不够(即父元素的宽度不够),因此需要给子元素设置宽高,使子元素占满父元素后还不够放.
默认主轴是水平的时候,如果子元素没有设置高度,那么高度是平均分配的,如果设置了高度,那么就是设置的高度,此时每行之间还有间距,且间距是相等的.
如果主轴是垂直的话,需要高度空间不够才能换列,需要设置子元素高度,当主轴变成垂直之后,垂直超出会被压缩,水平不会.
4、 flex-flow
-
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;
例如: flex-flow:column wrap-reverse;
5、 justify-content属性 定义了项目在主轴（）上的对齐方式。
- justify-content的属性值:
- flex-start (弹性盒子开始 ,默认值 主轴为水平的默认靠左,主轴为垂直时默认靠上)
- flex-end (弹性盒子结束)
- center (居中)
- space-between (如果主轴水平,水平两端对齐,主轴垂直,垂直两端对齐 ,两端对齐就是左边靠左,右边靠右)
- space-around (有间距,且两边间距是中间间距的一半)
- space-evenly（把剩余的空间进行均分.有间距,间距平均分配1:1）
6、align-items属性定义项目在侧轴(如果主轴为水平的,侧轴为垂直方向的,反之亦然)上如何对齐。
-
align-items的属性值: (按主轴为水平轴 默认的)
- flex-start (虽然靠上对齐,但是换行之后行与行之间有间距)
- flex-end (虽然靠下对齐,但是换行之后行与行之间有间距)
- center (居中对齐)
- baseline (基于文本基线对齐)
- stretch （默认值,拉伸,铺满高度）;
-
align-items的属性值: (按主轴为垂直轴)
- flex-start (虽然靠左对齐,但是换行之后行与行之间有间距)
- flex-end (虽然靠右对齐,但是换行之后行与行之间有间距)
- center (居中对齐)
- baseline (这个时候基线没有效果)
- stretch （默认值,拉伸,铺满高度）
如果想要设置div1在父元素div中水平垂直居中,则可以给父元素添加:
div1{ display:flex; justify-content:center; text-items:center; }也可以 给父元素添加弹性盒子,给需要水平居中的盒子添加 margin: auto;
7、align-content属性定义了项目在侧轴上的对齐方式。（必须搭配flex-wrap才可）
-
align-content的属性值:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch（默认值）
-
align-content在侧轴上执行样式的时候，会把默认的间距给合并。
(通俗讲, 它和align-items都是表示侧轴对齐形式,但是它换行的话第一行和第二行中间没有缝隙 )定义侧轴有两种对齐方式,align-items 和 align-content , 按照实际情况合理使用这两种侧轴对齐方式.
Flex项目属性(添加在子元素上的)
- 1、order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 - 2、flex-grow属性（适合制作2栏或者3栏自适应的布局）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
这个flex-grow常用于给单个添加.给某一个给1,让它占据所有的剩余空间 - 3、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（适合移动端溢出出滚动条的效果，前提是利用弹性布局写）
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。 - 4、flex-basis=width属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 - 5、flex属性 flex:1;
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
一般写一个值的时候把其它两个书写成默认值 - 6、align-self属性
align-self的属性值:- auto
- flex-start
- flex-end
- center
- baseline
- stretch
响应式布局
就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.
-
Responsive 网页设计不但要考虑其元素布局的秩序，还要做到“有求必应”，因此需要满足三个条件。
1、网站必须建立灵活的网格基础；
2、引用到网站的图片必须是可伸缩的；
3、不同的显示风格，需要在Media Query上设置不同的样式
注意：缺少任何一个功能，就不能称为是合格的Responsive 网页设计 -
响应式的专业术语:
1、流体网格
2、弹性图片
3、媒体查询
媒体查询可以根据设备的尺寸，查询出适配的样式，使用这个属性可以根据用户终端设备适配对
应的样式
4、屏幕分辨率
指的是用户使用的设备浏览web页面时的分辨率，比如智能手机浏览器，移动电脑浏览器，平板
电脑浏览器和桌面浏览器。只有知道有哪种分辨率，才能调用对应的样式。
5、主要断点：简单来说就是设备宽度的临界点 -
媒体查询:
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
定义和使用:
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
