精华内容
下载资源
问答
  • css弹性布局

    2019-08-26 13:23:49
    CSS弹性布局flex布局媒体类型一、link方法二、@import方法三、@media方法 响应式网页: 将三种已有的开发技术(弹性布局,弹性图片,媒体和媒体查询)整合起来,并命名为响应式网页。 我们为什么要使用弹性...

    响应式网页:
    	将三种已有的开发技术(弹性布局,弹性图片,媒体和媒体查询)整合起来,并命名为响应式网页。
    

    我们为什么要使用弹性布局?

    .box{
    	width: 960px;
    }
    

    980px在普通的笔记本的刚刚好,但是一旦在高分辨率的显示器上两边就会出现空白,同理如果设置高的分辨率那么在低分辨率的显示器上就会出现滚动条。

    flex布局

    flex在css3引入,又称为弹性盒模型。实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,减少依赖浮动布局实现元素位置的定义以及重置元素的大小。

    设置flex语法:

    display: flex;
    

    flex熟悉的具体数值并不代表具体的宽度值,而是一个比例值。父容器的剩余空间里按比例分配自己的宽度。
    flex比例值为1 ,则是1:1 ,如果为2 ,则是1:2

    flex-direction:row  	| 		row-reverse | 	colun	|	column-reverse
    
    row : 主轴为水平方向,起点在左端。及网页元素排列方式从左到右排序(默认)。
    row-reberse : 主轴为水平方向,起点在右端与row排序相反,元素从右到左排序。
    column:主轴为垂直方向,起点在上端。
    column-reverse:主轴为垂直方向,起点在下端。
    

    媒体类型

    在css2中是一个常见的属性,也是一个非常有用的属性,可以通过类型对不同设备指定不同样式

    设备类型
    All 所有设备
    Braille 盲人用点字法触觉回馈设备
    Dashes 盲文打印机
    Handheld 便携设备
    Print 打印用纸或打印预览视图
    Projection 各种投影设备
    Screen 电脑显示器
    Speech 语音或音频合成器
    Tv 电视机类型设备
    Tty 使用固定密度字母栅格的媒介,比如电传打字机和终端

    一、link方法

    通过link标签中的media属性来指定不同的媒体类型

    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    

    二、@import方法

    一种是在样式中通过@import调用另一个样式文件;另一种方法是在标签中的中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。

    @importurl(reset.css) screen;   
    @importurl(print.css) print;
    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>
    

    三、@media方法

    跟@import有点类似,具有两种形式

    @media screen {
       选择器{/*你的样式代码写在这里…*/}
    }
    在head标签中引用
    
    <head>
    <style type="text/css">
        @media screen{
        选择器{/*你的样式代码写在这里…*/}
    }
    </style>
    </head>
    
    
    展开全文
  • CSS弹性布局

    2020-06-23 20:52:45
    弹性布局作为css样式中一个非常重要的布局,深受我们大家的广泛应用。下面我们就简洁的介绍我们弹性布局在响应式页面中的重要属性的应用!

    弹性布局可以用于做响应式页面的制作
    使用弹性布局需要砸父元素中加入display里的flex属性
    例:让一个div是弹性布局,代码如下

    .div{
    	display:flex;
    	}
    

    flex里有很多属性,其中设置在容器上的属性有6个。

    1.flex direction:决定主轴的方向(即项目的排列方向)。

    • row:主轴为水平方向,起点在左边
    <head>
        <meta charset="utf-8">
        <title>弹性布局</title>
        <style>
            .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:row;
            }
            .div1,.div2,.div3{
                width: 300px;
                height: 200px;
            }
            .div1{
                background-color: red;
            }
            .div2{
                background-color: darkcyan;
            }
            .div3{
                background-color: orange;
            }
    
        </style>
    </head>
    
    <body>
    <div class="div">
        <div class="div1">one</div>
        <div class="div2">two</div>
        <div class="div3">three</div>
    </div>
    </body>
    

    效果如下:
    在这里插入图片描述

    • row-reverse:主轴为水平方向,起点在右边。
    .div{
               width: 1300px;
               background-color: green;
               height: 200px;
               display: flex;
               flex-direction:row;
           }
    

    效果如下:
    在这里插入图片描述

    • column:主轴为垂直方向,起点在上沿。
      例:
    .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:column;
            }
    

    效果如下:
    在这里插入图片描述
    div的高度被自动压缩

    • column-reverse:主轴为垂直方向,起点在下沿。
    .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:column-reverse;
            }
    

    效果如下:
    在这里插入图片描述

    2.flex-wrap:一行排不下,如何换行

    • wrap:换行,第一行在上方
     .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap;
            }
    

    效果如下:
    在这里插入图片描述

    • nowrap:不换行
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap;
            }
    

    效果如下:
    在这里插入图片描述
    div不换行,宽度自动收缩

    • wrap-reverse:换行,第一行在下方。
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap-reverse;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    3.flex-flow:flex-direction属性和flex-wrap属性的简写形式

    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-flow: row wrap;
                margin-top: 200px;
            }
    

    4.justify-content:项目在主轴上的对齐方式

    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:flex-start;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    • flex-end:右端对齐
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:flex-end;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    • center:居中对齐
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:center;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    • space-around:每个项目两侧的间隔相等
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-around;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    • space-between:两端对齐,项目之间的间隔都相等
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                margin-top: 200px;
            }
    

    效果如下:
    在这里插入图片描述

    5.align-items:项目在交叉轴上如何对齐

    • flex-start
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:flex-start;
                
            }
    

    效果如下:
    在这里插入图片描述

    • flex-end
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:flex-end;
                
            }
    

    效果如下:
    在这里插入图片描述

    • center
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:center;
                
            }
    

    效果如下:
    在这里插入图片描述

    • stretch::如果项目未设置高度或设为auto,将占满整个容器的高度。
    .div{
                width: 100%;
                background-color: green;
                height: 500px;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
    
            }
    

    效果如下:
    在这里插入图片描述

    • baseline:项目的第一行文字的基线对齐。
    .div{
                width: 100%;
                background-color: green;
                height: 500px;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
    
            }
    

    效果如下:
    在这里插入图片描述

    6.align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    以上就是我对弹性布局的理解以及属性的实现。欢迎大家指点!

    展开全文
  • CSS 弹性布局

    2020-01-10 12:24:10
    弹性布局

    Flex布局

    • flex 布局可以响应式地进行页面的布局,十分方便灵活
    • 块级元素和行内元素都可以使用 flex 进行布局
    .box{
      display: flex;
    }
    
    .box{
      display: inline-flex;
    }
    
    • Webkit内核的浏览器,必须加上-webkit前缀
    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    
    • 注意:设为Flex布局以后,子元素的float、clearvertical-align属性将失效
    基本概念
    • 采用Flex布局的元素,称为Flex容器
    • 容器所有子元素自动成为容器成员,称为Flex项目
    • 容器默认存在两根轴:水平的主轴和垂直的交叉轴
    • 项目默认沿主轴排列
      在这里插入图片描述

    容器属性

    一、flex-direction

    • 属性决定主轴的方向(即项目的排列方向),有四种可能的值
    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。
    

    二、flex-wrap

    • 这个属性就是设置项目排列的换行的方案的,项目一般是沿着轴线排列
    • 三种可能的属性值
    nowrap(默认):不换行
    wrap:换行,第一行在上方
    wrap-reverse:换行,第一行在下方
    

    三、flex-flow

    • 就是简写 direction和 wrap 两个属性的
    .box {
      flex-flow: <flex-direction> <flex-wrap>;
    }
    

    四、justify-content

    • 定义了项目在主轴上的对齐方式,几种可能的值如下
      在这里插入图片描述

    五、align-items

    • 定义项目在交叉轴上如何对齐,几种可能的值如下
    • 其中baseline:表示与项目的第一行文字的基线对齐
      在这里插入图片描述

    六、align-content

    • 定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
    • 可能的值有如下的几种
      在这里插入图片描述
    between 和 around 的区别
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    项目属性

    一、order

    • order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
    .item {
      order: <integer>;
    }
    

    二、flex-grow

    • flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)
    • 这个属性用来进行轴向方向空间的分割还是很有用的

    三、flex-shrink

    • flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
    • 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小
    • 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小
    • 负值对该属性无效

    四、flex-basis

    • 这个属性如果主轴水平,基本设置的效果就和width设置的效果是一样的
    • 默认值是auto,也就是项目的原本的大小(主轴空间)

    五、flex

    • flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。
    • 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

    六、align-self

    • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
    • 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    在这里插入图片描述


    参考文章
    https://www.runoob.com/w3cnote/flex-grammar.html

    展开全文
  • css 弹性布局

    2019-10-22 20:45:39
    什么是弹性布局? flex布局,是H5新出的布局方式,主要代替传统float浮动布局。 注意:布局要给父元素设置,子元素按照布局方式排列,他会使块级元素不独占一行。 特点:当没有给弹性布局设置换行时,子...
    		什么是弹性布局?
    			flex布局,是H5新出的布局方式,主要代替传统float浮动布局。
    			注意:布局要给父元素设置,子元素按照布局方式排列,他会使块级元素不独占一行。
    			特点:当没有给弹性布局设置换行时,子元素不会自动换行会在一行显示。
    		display: flex;	设置弹性布局
    		flex-direction:设置布局方向 ;
    			row;默认的从左至右的顺序排列的,代替左浮动/行内块元素。
    			row-reverse:按照从右至左的方向排列,代替右浮动。
    			column:按照从上至下的顺序排列,类似于正常文档流布局。
    			column-reverse:按照从下至上的顺序排列。
    		justify-content: 设置布局对齐方式;
    			center:居中对齐方式。
    			flex-start:从开始的位置对齐,头部对齐。
    			flex-end:从结束的位置对齐,尾部对齐。
    			space-around:子元素之间的距离等分。并左右两边留白,留白的距离是元素之间距离的一半。
    			space-between:子元素之间的距离等分,左右两边不留白。
    		flex-wrap: wrap;	设置换行
    			从超出父元素宽度的子元素开始换行,谁超出父元素从谁开始换行。
    
    展开全文
  • Css 弹性布局

    2021-02-27 15:14:45
    弹性布局 display:flex 要发生弹性布局的子元素,他们的父元素,成为容器需设置display:flex,flex将块级元素设置为容器, inline-flex将行内元素设置为容器 元素设置为flex容器后,容器的text-align,vertical-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,113
精华内容 1,645
关键字:

css弹性布局