flex响应式布局flex诞生的意义替代float浮动传统的定位方式之前布局方法: div + css(float

flex诞生的意义

替代float浮动传统的定位方式

之前布局方法: div + css(float/ display:block inline inline-block)

缺点: 会让元素脱标如果没有给父元素设置高度会导致高度塌陷

在css中父元素尽量是让子元素撑起来高度不设置高度

清除浮动的方式: clear: both

好看的网页: 简洁/大方/排列规整

学习 --> flex grid 布局

响应式布局

* {
     margin: 0;
     padding:0;
   }
html,
body {
     height:100%;
     }

一套html,多套css让网站同时适配多种屏幕
如何让代码识别出不同屏幕宽度, 媒体查询media

//响应式网页不能按照传统pc写法
.container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
  }

响应式开发经验总结

1.css进行区分: 公共样式 PC样式 media 移动端样式 media

2.PC样式开发单位px 直接开发pc端大屏幕样式利用媒体查询设置断点,开发屏幕缩小之后的pc端样式

3.开发移动端的样式单位 rem vw 不用设置断点和媒体查询了,直接以iphone6为基准就可以了,移动端网页如何开发,那么响应式的移动端网页就怎么开发

主轴和交叉轴

特性: 默认主轴决定元素排列从左到右

flex属性

想要使用flex布局方案,需要在容器属性上使用display:flex 或者 display:inline-flex display:flex: 将一个元素转换为块级别的容器 display:inline-flex: 将一个元素转换为行内块级别的弹性容器

容器属性和子元素属性

容器属性

flex-direction: 设置主轴方向

row(默认值): 主轴为水平方向，项目排列起点在左端。
row-reverse: 主轴为水平方向，起点在右端。
column: 主轴为垂直方向，起点在上沿。
column-reverse: 主轴为垂直方向，起点在下沿。

flex-wrap: 自动换行

nowrap:(默认)，不发生换行。
wrap: 换行，第一行在上方。
wrap-reverse: 换行，第一行在下方。

flex-flow: 属性简写形式

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
  //示例: flex-flow: row wrap-reverse;
}

justify-content: 定义子元素在主轴上的对齐方式

flex-start: (默认)，左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐，子元素之间的间隔相等
space-around: 子元素之间的间隔相等。两端间隔相等。

align-items: 定义子元素在交叉轴上如何对齐

flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 子元素的第一行文字的基线对齐
stretch(默认值) ，如果子元素未设置高度或者设为auto，将占满整个容器的高度。

align-content: 定义多根轴线的对齐方式，`如果项目只有一根轴线，则该属性不起作用`

flex-start 与交叉轴的起点对齐 flex-end 与交叉轴的终点对齐 center 与交叉轴的中点对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值)，轴线占满整个交叉轴。

子元素属性

order: 定义元素的排列顺序 `元素的默认数值为0，一般来说，数值越小，排列越靠前`。

.item { order: 1 ; }

flex-grow: 定义剩余空间比例. `默认为0。即使存在剩余空间，也不会放大。`

.item { flex-grow: <number>; /* default 0 */ }

flex-shrink: 定义了元素的缩小比例，默认为1，`即如果空间不足，该项目将缩小。`

如果一个子元素的flex-shrink属性为0，当空间不足时，这个子元素不会缩小。负值对该属性无效。

.item { flex-shrink: <number>; /* default 1 */ }

flex-basis

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间。浏览器会根据这个属性，来计算主轴的空间使用。默认值为auto。即为子元素本来的大小。

.item {
  flex-basis: 200px | auto; /* default auto */
}

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ] | auto
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex等于数值:

flex: 1

flex-grow: 1; //平均分配剩余空间
flex-shrink: 1; //空间不足,该项目会缩小
flex-basis: 0%;

flex: 2

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

flex: n

flex-grow: n;
flex-shrink: 1;
flex-basis: 0%;

flex等于带有单位的值情况如下：

flex: 100px

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;

flex: 200px

flex-grow:1;
flex-shrink: 1;
flex-basis: 200px;

注意: 如果容器里面的主轴空间全部被子元素占据，那么某一个子元素的flex-basis值大于元素现在在主轴空间占据的最大宽度时，那么该子元素就会放大，相应的，其他的子元素就会缩小。

flex的值为两个值并且第二个值具有单位的时候:

flex: 1 200px;

flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;

flex: 2 200px;

flex-grow: 2;
flex-shrink: 1;
flex-basis: 200px;

align-self: 允许单个子元素与其他项目采用不一样的对齐方式.

可以覆盖flex容器属性中的align-items属性值。默认为auto，表示继承自父元素的align-items属性，如果没有父元素属性，则等同于stretch。

  .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }

flex响应式布局