弹性盒的属性了解和媒体查询

分类：Flex作者：编程之家用户
弹性盒 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}
        h1{margin: 20px 0 0 0;font-weight:100;clear: both;font-size: 24px}
        span{float: left;padding:0 10px;width: 250px}
        input{display: block}
        section{height: 50px;width: 50px;border: 1px solid #333;line-height: 50px;text-align: center}
        #display{border: 1px solid #222;display: flex;padding: 5px;}
        #flex-direction{border: 1px solid #222;padding: 5px;display: flex;flex-direction: row}
        #flex-wrap{border: 1px solid #222;padding: 5px;display: flex;flex-wrap:nowrap}
        #justify-content{height: 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>

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-start{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-start}
            .flex-end{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-end}
            .center{height: 100px;display: flex;padding: 5px;border: 1px solid #333;align-items:center}
            .baseline{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:baseline}
            .stretch{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:stretch}
            #align-items p{width: 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-start{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-start;flex-wrap:wrap}
            .cflex-end{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-end;flex-wrap:wrap}
            .ccenter{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:center;flex-wrap:wrap}
            .cspace-between{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-between;flex-wrap:wrap}
            .cspace-around{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-around;flex-wrap:wrap}
            .cstretch{height: 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>    

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）然后等分 
.box{width: 210px;height: 30px;;border: 1px solid #333;display: flex}
            .box1{width: 50px;background: #f00;flex-grow: 1}
            .box2{width: 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 
.box3{width: 220px;height: 30px;border: 1px solid #333;display: flex}
            .box4{width: 150px;background: #f00;flex-shrink: 1}
            .box5{width: 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分配空间 
.ul2{width:600px;height: 200px;background: #999;display: flex;list-style: none;}
            .ul2 li{height: 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属性,子元素排位子 
.ul1{height: 100px;width: 600px;background: #999;display: flex;list-style: none;}
            .ul1 li{width: 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属性，子元素的侧轴方向起始位置 
.ul3{height: 100px;width: 800px;padding: 20px; background: #999;display: flex;list-style: none;}
            .ul3 li{width: 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;}
媒体查询             根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）设定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) {
    body{background:#00f;} 
    }
/*  rem（web app使用）用根元素的font-size作为单位去匹配所有的单位 */
@media screen and (min-width:1000px) {
    html{font-size: 48px;} 
}
@media screen and (max-width: 800px) and (min-width:1000px) {
    html{font-size: 36px;} 
}
@media screen and (min-width:800px) {
    html{font-size: 24px;} 
}
     .input2{width: 3rem;height: 2rem;background: #0ff;border: none;color: #fff;font-size: 1rem}   

<h1>rem（web app使用）</h1>
    <input class="input2" value="确定" type="submit">
练习 
.div{display:flex;flex-wrap: nowrap;background: #999;padding: 10px;width: 600px}
            .div div{transition: 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:hover{width:400px}

<h1>练习</h1>
    <div class="div">
       <div></div>
　　　　<div></div>
　　　　<div></div>
　　　　<div></div>
　　　　<div></div>
    </div>

　　

原文地址：https://www.cnblogs.com/solaris-wwf/p/11617435.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot