1. 程式人生 > >彈性盒子的梳理 (個人筆記)

彈性盒子的梳理 (個人筆記)

只有一個 數字 tween nts strong www 進行 前行 倒序

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;讓其變成彈性盒 此時,其子元素會默認橫向排列起來,類似浮動的效果

屬性1flex-direction:(決定子項在flex容器中的位置)

flex-direction: column; 從上到下排列,從父級上面開始[即縱向從上往下排列(頂對齊)]

flex-direction: column-reverse; 從下到上排列( 最後一個元素在最前面)並且從父級底下開始

flex-direction: row;(默認值) 即橫向從左到右排列(左對齊)

flex-direction: row-reverse; 對齊方式與row相反

屬性2flex-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份的)和501份的) */

3.flex-shrink: 0;
用數值來定義收縮比率。不允許負值 默認1

/*當容器寬度不夠,shrink0的元素不會縮小 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>

將這段話加上,時時監控窗口大小用的

彈性盒子的梳理 (個人筆記)