弹性盒子的梳理 （个人笔记）

Posted 2020-10-31 zss1

1.谁是弹性盒，谁写（一般是父元素）Display:box    如果不兼容写：display:-moz-box

    Display:-webkit-box;

  Display:-o-box;

Display:-ms-box;

Display:box;

2.父元素决定子元素的排列方向 box-orient：horizontal（水平  默认的）

Vertical(垂直排列、纵向)

3.父元素决定子元素的显示顺序 box-direction ：reverse（倒序）

4．依然给父元素设置，父元素决定子元素的对齐方式：

水平对其：box-pack:start center end    (左中右)

垂直对齐：box-align： start center end    (上中下)

以上四个都是写给父元素的。

5.子元素设置分配空间

Box-flex：1 2 3 4  写的数字越大，占空间越大

6.子元素位置的改变：box-ordinal-group:1 2 3 4写数值，很少用

<meta name=”viewport”  content=”width=device-width,initial-scale=1.0”

第三个是初始化缩放，1.0  就是禁止缩放

第二个值是宽度等于设备宽度

第一个是虚拟窗口意思，就是模拟手机等设备

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

当http-equiv="X-UA-Compatible"这句话是遇上IE8的时候以后面最新版本的IE渲染

IE=edge    以最新版本IE显示 chrome=1  而当机器上安装的IE没法渲染就用谷歌浏览器的内核进行渲染

 弹性盒子手机布局

分为上中下三个部分，山下给固定的高度45px或者44px ，然后让中间.main部分加上box-flex:1；也就是让剩余的空间全部给中间；【保证html  body 最外层的父亲宽高都是100%】

 弹性盒布局(懂懂)

给父元素加的属性:

首先，父元素加上一个display: flex;让其变成弹性盒 此时,其子元素会默认横向排列起来，类似浮动的效果

属性1：flex-direction:(决定子项在flex容器中的位置)

flex-direction: column;  从上到下排列,从父级上面开始[即纵向从上往下排列（顶对齐）]

flex-direction: column-reverse;  从下到上排列（ 最后一个元素在最前面）并且从父级底下开始

flex-direction: row;(默认值) 即横向从左到右排列（左对齐）

flex-direction: row-reverse; 对齐方式与row相反

属性2：flex-wrap:(规定子项是否换行)

flex-wrap: nowrap;/*默认样式，超出不换号，自己平均缩小*/

flex-wrap: wrap;
flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse; 超出部分换行，并且反向 仅仅是行反转，单个子元素不变

 属性3  flex-flow：/*这个属性是direction 和wrap的复合属性*/

属性4  justify-content  【默认值flex-start 】

justify-content:flex-start; /*子元素左对齐*/

justify-content:flex-end; /*子元素右对齐*/

justify-content: center; /*子元素居中对齐*/

justify-content: space-around;/*//平均分布 两边会有间距*/

justify-content: space-between;  /*两边对齐中间平均分布【两边靠边了，中间的平分】*/

属性5  align-content: flex-start; 本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <‘ justify-content ‘> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果

 align-content: flex-start; /*如果父容器高度大的话原本是行之间平分父容器，有空隙. 加上后   行---上对齐*/

align-content: flex-end;

align-content: center;

align-content:space-around;/*让行平均分布 最上和最底下还是会有中间行空隙的一半*/

align-content: space-between;/*让行平均分布 最上和最底下无空隙，其余平分空隙*/

align-content: stretch;  『默认值，子元素没有高度时默认会扩大高度，子元素加起来高度充满父元素』

 

属性6 align-items:  定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

 

 align-items:flex-start; 垂直方向上对齐 左上方

align-items: flex-end; /*垂直方向下对其*/

align-items: center;/*居中对齐*/

align-items:stretch; /*这个属性是个默认值，如果这个元素的子元素没有给高度，子元素会垂直充满容器，给高度的话不起作用*/

align-items: baseline;/*子元素以当前行的首行文字为基准对其*/

加给子元素的

1.Order 默认是0 用整数值来定义排列顺序，数值小的排在前面。可以为负值。

2.flex-grow: 1; 分配剩余空间的 默认是0//*把父级元素剩下的分成grow的份数,此元素占的份数，比方说自己都规定了自己的宽度是30，五个子集，父级300，那么只有一个孩子写grow的话，这个孩子就是本身的50+（300-150 ）|  如果有有两个孩子写了这个属性一个值是1一个是2  那么这两个孩子就是本身的50 加上把剩下的300-150=150分成三份，这俩再分别加上100 （2份的）和50（1份的） */

3.flex-shrink: 0;
用数值来定义收缩比率。不允许负值  默认1

/*当容器宽度不够,shrink为0的元素不会缩小 shrink为其他的数，是缩小的倍数，（不是它本身定义宽度的一半，而是其它那些经过挤压后的子元素的）比分说2就是其它的一半，3就是三分之一，所有默认值是1*/

4.flex-basis: 100px; <length>：用长度值来定义宽度。不允许负值

<percentage>：用百分比来定义宽度。不允许负值

auto：无特定宽度值，取决于其它属性值

content：基于内容自动计算宽度

 

5.flex是 grow shrink basis的缩写

6.align-self: flex-end;定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

/*可以控制单个元素的上中下排列方式*/值：auto | flex-start | flex-end | center | baseline | stretch

 手机端页面

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

<script>

fontSize();

function fontSize() {

var w = window.innerWidth/10;

var html= document.querySelector("html");

html.style.fontSize=w + "px";

}

// 当窗口的大小发生改变的时候会触发

window.onresize = fontSize;

</script>

将这段话加上，时时监控窗口大小用的