flex 布局

弹性盒子概念: 通过调整 盒子内元素的宽高. 从而在任何显示设备上 都有很好的显示效果.

可以 扩展里面的元素 来填充可用空间. 可以 缩小里面的元素. 给别的优先级高的元素腾出空间

块级布局 侧重于 垂直方向. 行内布局 侧重于 水平方向.

这个的 缺点 就是不能适应 手机的 翻转. 由水平 变为 垂直.. 那种应该用 bootstrap..

栅格布局则针对大规模的布局。

元素的显示 和 源码中的顺序无关

— 圣杯布局.

上中下. 中间分 左中右.

当在手机中.就 全部是上下结构了.

不仅元素尺寸需要缩减. 显示顺序也需要改变.

flex: 3 1 60%;

flex 属性是: flex-grow,flex-shrink,flex-basis 的简介

比如: 左中右. flex-baiss 可以设置百分比: 20% - 60% - 20%

债版: css

如果 宽度 小于 640 .那么: 就垂直排列…

还可以这种 文档顺序. @media all and (max-width: 640px) {

   #main, #page {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #main > article, #main > nav, #main > aside {
    /* 恢复到文档内的自然顺序 */
    -webkit-order: 0;
            order: 0;
   }

   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }

Flex-3列布局

设置一个最外层的大容器. .box{ display: -webkit-flex; /* Safari */ display: flex; }

这个大容器下面的 小容器就是项目…

左边两个小列. 右边一个大列. 高度都是100

左中能自适应.

jquery 鼠标拖动改变大小.

三列等高布局 (Ulysses)

div 设计

body html 必须 height 100% 下面的才能实现全网页高度100%. T 下面必须再套一个最外层的div 这个div 高度也必须100%.

flex 实际

Flex 设置 必须考虑flex-shrink 是否缩小, flex-grow 是否放大. 不然会导致 鼠标拖动时候.拖动条和鼠标不同步!!!!! <br>

Flex-Calculator

功能实现: 这样的计算器布局

flex inline-flex

传统的: 盒子模型: display postion float …. 要实现 垂直居中 就不容易. 

text-align   文字. 左中右. float → div  只有左右 没有居中. flex: → 多个 div

单个div 居中: margin-left:auto margin-right: auto

display  也是一种布局方式 display:table-cell 让 表格元素 以单元格形式呈现. 尽量少用??? 过时…


先 display 设置成. display:flex

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。