弹性盒的属性了解和媒体查询
Posted solaris-wwf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒的属性了解和媒体查询相关的知识，希望对你有一定的参考价值。
弹性盒 flexbil box or flexbox,
css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式，由弹性容器flex container,弹性子元素flex item组成，设置display来实现。
x轴代表主轴，从左到右，y轴代表侧轴，从上到下,主轴不一定是水平的，取决于justify-content，伸缩项目放置在伸缩容器内从主轴的起点main-start到终点main-end，主轴的尺寸main-size,伸缩项目在主轴的宽高对着主轴的方向就是主轴的尺寸。
主轴main axis 侧轴cross axis
display:flex|inline-flex
flex-direction:row|row-reverse|column|column-reverse;主轴
flex-wrap:wrap|nowrap|wrap-reverse;设置伸缩子元素在缩小窗口时是否换行
justify-content:flex-start|flex-end|center|space-between|space-around
align-item:flex-start|flex-end|center|base-line|stretch
align-content:flex-start|flex-end|center|space-between|space-around|stretch
display，flex-direction，flex-wrap，justify-content的效果
*margin: 0;padding: 0;font-size: 18px h1margin: 20px 0 0 0;font-weight:100;clear: both;font-size: 24px spanfloat: left;padding:0 10px;width: 250px inputdisplay: block sectionheight: 50px;width: 50px;border: 1px solid #333;line-height: 50px;text-align: center #displayborder: 1px solid #222;display: flex;padding: 5px; #flex-directionborder: 1px solid #222;padding: 5px;display: flex;flex-direction: row #flex-wrapborder: 1px solid #222;padding: 5px;display: flex;flex-wrap:nowrap #justify-contentheight: 100px;;border: 1px solid #222;padding: 5px;display: flex;justify-content: flex-start
<h1>display</h1> <span> flex<input type="radio" name="display" /> inline-flex<input type="radio" name="display" /> </span> <div id="display"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </div> <h1>flex-direction</h1> <span> row<input type="radio" name="flex-direction" /> row-reverse<input type="radio" name="flex-direction"/> column<input type="radio" name="flex-direction"/> column-reverse<input type="radio" name="flex-direction"/> </span> <div id="flex-direction"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </div> <h1>flex-wrap(设置伸缩子元素在缩小窗口时是否换行)</h1> <span> nowrap<input type="radio" name="flex-wrap" /> wrap<input type="radio" name="flex-wrap"/> wrap-reverse<input type="radio" name="flex-wrap"/> </span> <div id="flex-wrap"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> </div> <h1>justify-content</h1> <span> flex-start<input type="radio" name="justify-content" /> flex-end<input type="radio" name="justify-content"/> center<input type="radio" name="justify-content"/> space-between<input type="radio" name="justify-content"/> space-around<input type="radio" name="justify-content"/> </span> <div id="justify-content"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </div>
js部分
var btnFlex = document.getElementsByTagName("input"); var oDiv = document.getElementsByTagName("div"); /* display */ btnFlex[0].onclick = function () if(this.checked) oDiv[0].style.display = "flex"; btnFlex[1].onclick = function () if(this.checked) oDiv[0].style.display = "inline-flex"; /* flex-direction */ btnFlex[2].onclick = function () if(this.checked) oDiv[1].style.cssText = "flex-direction: row"; btnFlex[3].onclick = function () if(this.checked) oDiv[1].style.cssText = "flex-direction: row-reverse"; btnFlex[4].onclick = function () if(btnFlex[4].checked) oDiv[1].style.cssText = "flex-direction: column"; btnFlex[5].onclick = function () if(this.checked) oDiv[1].style.cssText = "flex-direction: column-reverse"; /* flex-wrap */ btnFlex[6].onclick = function () if(this.checked) oDiv[2].style.cssText = "flex-wrap: nowrap"; btnFlex[7].onclick = function () if(this.checked) oDiv[2].style.cssText = "flex-wrap: wrap"; btnFlex[8].onclick = function () if(this.checked) oDiv[2].style.cssText = "flex-wrap: wrap-reverse"; /* justify-content */ btnFlex[9].onclick = function () if(this.checked) oDiv[3].style.cssText = "justify-content: flex-start"; btnFlex[10].onclick = function () if(this.checked) oDiv[3].style.cssText = "justify-content: flex-end"; btnFlex[11].onclick = function () if(this.checked) oDiv[3].style.cssText = "justify-content: center"; btnFlex[12].onclick = function () if(this.checked) oDiv[3].style.cssText = "justify-content: space-between"; btnFlex[13].onclick = function () if(this.checked) oDiv[3].style.cssText = "justify-content: space-around";
align-items的效果
.flex-startheight: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-start .flex-endheight: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-end .centerheight: 100px;display: flex;padding: 5px;border: 1px solid #333;align-items:center .baselineheight: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:baseline .stretchheight: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:stretch #align-items pwidth: 50px;border: 1px solid #333
<h1>align-items侧轴</h1> <span> stretch<input type="radio" name="align-items"/> flex-start<input type="radio" name="align-items" /> flex-end<input type="radio" name="align-items"/> center<input type="radio" name="align-items"/> base-line<input type="radio" name="align-items"/> </span> <div id="align-items" class="stretch"> <p style="font-size: 12px">1</p> <p>2</p> <p style="font-size: 28px">3</p> <p style="font-size: 40px">4</p> </div>
align-content的效果
.cflex-startheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-start;flex-wrap:wrap .cflex-endheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-end;flex-wrap:wrap .ccenterheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:center;flex-wrap:wrap .cspace-betweenheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-between;flex-wrap:wrap .cspace-aroundheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-around;flex-wrap:wrap .cstretchheight: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:stretch;flex-wrap:wrap
<h1>align-content(设置伸缩子元素在缩小窗口时是否换行)</h1> <span> stretch<input type="radio" name="align-content"/> flex-start<input type="radio" name="align-content" /> flex-end<input type="radio" name="align-content"/> center<input type="radio" name="align-content"/> space-between<input type="radio" name="align-content"/> space-around<input type="radio" name="align-content"/> </span> <div id="align-content" class="cstretch"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> </div>
js部分
btnFlex[19].onclick = function () if(this.checked) oDiv[5].setAttribute("class","cstretch"); btnFlex[20].onclick = function () if(this.checked) oDiv[5].setAttribute("class","cflex-start"); btnFlex[21].onclick = function () if(this.checked) oDiv[5].setAttribute("class","cflex-end"); btnFlex[22].onclick = function () if(this.checked) oDiv[5].setAttribute("class","ccenter"); btnFlex[23].onclick = function () if(this.checked) oDiv[5].setAttribute("class","cspace-between"); btnFlex[24].onclick = function () if(this.checked) oDiv[5].setAttribute("class","cspace-around");
写在子元素上的属性
flex:none|flex-grow|flex-shrink|flex-basis;默认0 1 auto
复合属性，如果flex:1则计算值为flex:1 1 0;auto则是1 1 auto,none则是0 0 auto
flex-grow:; flex-grow:<number>(default 0)不允许负值，默认0不分配空间，1分配
设置或检索弹性盒的扩展比例，根据弹性盒子元素的扩展因子作为比率来分配剩余空间
flex-shrink:;flex-shrink:<number>(default 1)；
分配超出的空间
flex-basis：设置或检索弹性盒的伸缩基准值，
auto：无特定宽度，取决于其他属性
<length>：用长度值来定义宽度，不能负值
<percentage>:百分比，不能负值
oder:<integer>
设置子元素的出现顺序；integer整数值，可以负值，数值小的排前面，默认0
align-self:auto|flex-start|flex-end|center|baseline|stretch
设置该弹性元素的在侧轴方向上的对齐方式
auto：取决去父元素的align-items值,如果没有，则为stretch
flex-grow
以1比2分配剩余空间，210-50-100=60,60/（1+2）然后等分
.boxwidth: 210px;height: 30px;;border: 1px solid #333;display: flex .box1width: 50px;background: #f00;flex-grow: 1 .box2width: 100px;background:#0f0;flex-grow: 2
<div class="box"> <div class="box1">是非得失</div><div class="box2">送豆腐豆腐</div> </div>
flex-shirink
超出的空间是150+100-220=30px，加权总值 150*1+100*2=350
box4被移除的空间比例=150*1/320*40=18.75;150-18.75
box5=100*2/320*40=21.25;100-21.25
.box3width: 220px;height: 30px;border: 1px solid #333;display: flex .box4width: 150px;background: #f00;flex-shrink: 1 .box5width: 100px;background:#0f0;flex-shrink: 2
<div class="box3"> <div class="box4">是非得失</div><div class="box5">送豆腐豆腐</div> </div>
flex-basis：flex-shrink默认auto，设置了flex-basis之后，变成了1:6:1分配空间
.ul2width:600px;height: 200px;background: #999;display: flex;list-style: none; .ul2 liheight: 100px;width: 100px;background: #444 .ul2 li:nth-of-type(2)flex-basis: 600px;background: #555
<h1>flex-basis</h1> <ul class="ul2"> <li>a</li> <li>b</li> <li>c</li> </ul>
oder属性,子元素排位子
.ul1height: 100px;width: 600px;background: #999;display: flex;list-style: none; .ul1 liwidth: 100px;margin-right: 20px;background: #333 .ul1 li:nth-child(3),.ul1 li:nth-child(5)order: 1;
<ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
align-self属性，子元素的侧轴方向起始位置
.ul3height: 100px;width: 800px;padding: 20px; background: #999;display: flex;list-style: none; .ul3 liwidth: 100px;margin-right: 20px;background: #333 .ul3 li:nth-child(1)align-self: auto; .ul3 li:nth-child(2)align-self: flex-start; .ul3 li:nth-child(3)align-self: flex-end; .ul3 li:nth-child(4)align-self: center; .ul3 li:nth-child(5)align-self: baseline;padding: 20px .ul3 li:nth-child(6)align-self: baseline; .ul3 li:nth-child(7)align-self: stretch;
<h1>align-self</h1> <ul class="ul3"> <li>auto</li>
<li>flex-start</li>
<li>flex-end</li>
<li>center</li>
<li>baseline-padding</li>
<li>baseline</li>
<li>stretch</li>
<li>wu</li> </ul>
媒体查询
根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）设定css，由媒体类型和一个或多个的检测媒体特性的条件表达式
可用于检测媒体特性的有width,height、color等，在不改变媒体内容下，为特定设备提供样式
语法一
@media mediatype and|not|only(media feature);
语法二
<link rel="stylesheet" media="mediatype and|not|only(media feature) href="" />
media query语法支持设备
-：-
all:所有设备；
aural:用于语音和音频生成器
braille：用于触觉反馈设备
embossed:适用于凸点设备（盲文）印刷设备
handheld：用于小型或手提设备
print:打印机
projection:投影图像：幻灯机
screen:计算机显示器,常用
tty:固定间距字符格，如电传打字机和终端
tv:电视
media query语法特性
见图
移动端布局：单位px em
1：百分比(弹性)布局
顶部与底部高度与位置不变，中间条目的左边与右边不随分辨率变化
2：rem等比缩放布局
局部根据分辨率放大缩小
px问题，比较精确，用户放大缩小浏览的时候，改变了字体的大小，页面布局会被打破，这时可以用em:font size of the element(相对于父元素)
rem（web app使用）
font size of the root element;相对于根元素的字体大小的单位。是一个相对单位
好处：等比例所有的屏幕。rem是通过根元素进行适配的，网页的根元素html通过设置字体大小就可以控制rem的大小。
媒体查询
@media screen and (min-width:1000px) body background:#0f0; @media screen and (min-width:800px) and (max-width:1000px) body background:#f00; @media screen and (max-width:800px) bodybackground:#00f; /* rem（web app使用）用根元素的font-size作为单位去匹配所有的单位 */ @media screen and (min-width:1000px) htmlfont-size: 48px; @media screen and (max-width: 800px) and (min-width:1000px) htmlfont-size: 36px; @media screen and (min-width:800px) htmlfont-size: 24px; .input2width: 3rem;height: 2rem;background: #0ff;border: none;color: #fff;font-size: 1rem
<h1>rem（web app使用）</h1> <input class="input2" value="确定" type="submit">
练习
.divdisplay:flex;flex-wrap: nowrap;background: #999;padding: 10px;width: 600px .div divtransition: all 0.5s;height: 100px;width: 200px;border:solid 1px #111; .div div:nth-child(1)background: url("../img/1.jpg") .div div:nth-child(2)background: url("../img/2.jpg") .div div:nth-child(3)background: url("../img/3.jpg") .div div:nth-child(4)background: url("../img/4.jpg") .div div:nth-child(5)background: url("../img/3.jpg") .div div:hoverwidth:400px
<h1>练习</h1> <div class="div"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
以上是关于弹性盒的属性了解和媒体查询的主要内容，如果未能解决你的问题，请参考以下文章