精华内容
下载资源
问答
  • 介绍 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。...style type="text/css"> .main{ width:200px; background-color: red
  • 关于displayflex布局,有人了解颇深,我也是看着别人的东西学习的。 displayflex的布局是什么、基本概念之类的我根本就不了解,只会用。每次看到概念之类的东西,我都是扫一眼就过去。 第一个属性和用法:flex-...
  • css displayflex详解

    千次阅读 2019-10-29 21:35:04
    css display:flex 属性 6 2018.09.04 16:03:53 字数 902 阅读 151492 一:display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便...

    页面布局的时候经常需要给块级子元素居中,目前发现最方便直接的是父级元素使用display:flex属性,
    css display:flex 属性
    6
    2018.09.04 16:03:53
    字数 902
    阅读 151492
    一:display:flex 布局
    display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    二:flex的六个属性
    flex-direction 容器内元素的排列方向(默认横向排列)
    1:flex-direction:row; 沿水平主轴让元素从左向右排列
    在这里插入图片描述

    2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
    在这里插入图片描述

    3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列
    在这里插入图片描述
    flex-wrap 容器内元素的换行(默认不换行)
    1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
    2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
    justify-content 元素在主轴(页面)上的排列
    1:justify-content : center;元素在主轴(页面)上居中排列
    在这里插入图片描述
    2:justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列
    在这里插入图片描述

    3:justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列
    在这里插入图片描述
    4:justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列
    在这里插入图片描述

    5:justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。
    在这里插入图片描述
    align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
    1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。
    在这里插入图片描述

    2:align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)
    在这里插入图片描述

    3:align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)
    在这里插入图片描述
    4:align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。(靠上对齐)
    align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)

    <div id="main">
      <div style="background-color:coral;"></div>
      <div style="background-color:lightblue;"></div>
      <div style="background-color:pink;"></div>
    </div>
    #main {
      width: 70px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: flex-start;
    }
    #main div {
      width: 70px;
      height: 70px;
    }
    

    1:align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。

    在这里插入图片描述

    2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

    在这里插入图片描述

    3:align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
    在这里插入图片描述

    4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于’flex-start’。

    在这里插入图片描述
    5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
    在这里插入图片描述

    6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于’center’。
    在这里插入图片描述
    三:flex常见属性总结
    Positional alignment
    justify-content: center; :居中排列
    justify-content: flex-start; /* 从行首起始位置开始排列 /
    justify-content: flex-end; / 从行尾位置开始排列 */

    作者:杨杨1314
    链接:https://www.jianshu.com/p/d9373a86b748
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    重点:
    1.Flex布局以后,子元素的float、clear和vertical-align属性将失效。
    2.justify-content:水平排列
    3.align-content:垂直排列
    4.align-items 水平居中基准线
    5.flex可以用于块级元素,也可用于行内元素
    复习:

    vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

    展开全文
  • 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...
  • Document 换行模式 flex-wrap: nowrap; 1 2 3 4 5 6 换行模式 flex-wrap: wrap; 自动换行 1 2 3 4 5 6 demo 效果:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        body {
          background-color: #eee;
          font-size: 22px;
        }
        h3 {
          margin: 10px;
          font-weight: normal;
        }
        section {
          width: 1000px;
          margin: 0 auto;
        }
        ul {
          background-color: #fff;
          border: 1px solid #ccc;
        }
        ul li {
          width: 200px;
          height: 200px;
          background-color: pink;
          margin: 10px;
        }
        section:nth-child(1) ul {
          display: flex;
          /* flex-wrap: nowrap; 默认就是不换行的 */
          /* flex-wrap: nowrap; */
        }
        section:nth-child(2) ul {
          display: flex;
          flex-wrap: wrap;
        }
      </style>
    </head>
    <body>
      <section>
        <h3>换行模式 flex-wrap: nowrap;</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </section>
      <section>
        <h3>换行模式 flex-wrap: wrap; 自动换行</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </section>
    </body>
    </html>
    
    • demo 效果:

    展开全文
  • css3弹性盒子displayflex

    万次阅读 2018-10-02 17:55:19
    css3的flexbox详细介绍:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 浏览器的支持情况: Chrome Safari Firefox ...

    css3的flexbox详细介绍:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    浏览器的支持情况:

    ChromeSafariFirefoxOperaIEEdgeAndroidiOS
    21+ (new)6.1+ (new)22+ (new)12.1+ (new)11+ (new)17+ (new)4.4+ (new)7.1+ (new)

    1. 把大盒子叫“容器”,里面的小盒子叫“项目”,“容器”设置display:flex时,具有弹性盒子功能。

     2. 主轴和交叉轴

    默认情况下,主轴和x轴相同,交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列。

    3. “容器”内的属性

    (1)盒子内部具有flex特性

            .container{
                display: flex;         
            }

    (2)排列方向:flex-direction:row;(默认情况)

    .container {
      flex-direction: row | row-reverse | column | column-reverse;
    }

    注意:当x轴上排列时,子元素都是inline-block元素;当y轴上排列时,子元素都是block元素。

    (3)是否换行:flex-wrap:nowrap;(默认所有子元素在一行排列)

    .container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

    如果可以换行,那么第一行有几个子元素?第二行有几个子元素?

       <style>
            .container{
                display: flex;
                
                flex-wrap: wrap;
                width: 400px;
                height: 400px;
                border: 1px solid black;          
            }
            .item{
                width: 98px;
                height: 100px;
                border: 1px solid black;
            }
            .item:nth-of-type(1){
                flex-grow: 1;
            }
            .item:nth-of-type(2){
                flex-grow: 1;
            }
            .item:nth-of-type(3){
                flex-grow: 1;
            }
            .item:nth-of-type(4){
                flex-grow: 1;
            }
            .item:nth-of-type(5){
                flex-grow: 1;
            }
        </style>
    <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 项目 -->
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>

     上述代码:每个子元素的盒子的宽度 98+2 = 100px,而“容器”的content去的宽度:400px,所以第一行可以放置4个子元素;让后将第五个子元素放置在第二行,同时注意高度

    如果:子元素的盒子宽度:100px + 2px = 102px,那么第一行有三个子元素,第二行有两个子元素,同时注意高度

    如果把子元素的高度设置为:150px,那么效果:

    如果子元素一共有三行,那么效果:子元素的宽:196px,高100px

    结论:(子元素x轴方向排列)设置换行属性后,子元素先在第一行排列,(子元素的盒模型宽=border+padding+content)与(“容器”的content宽度)能放下的就放在该行,不能放下的放在下一行。

    两行时,将容器分为两个半区,每一行在自己的半区内居上(父级的align-items属性,默认是:flex-start);同理:三行时,将容器分为三个半区,每一行也是在自己的半区内居上。

    重点是:有几行,就将容器上下分为几个半区。(默认情况align-content:stretch)

    (4)flex-flow: <‘flex-direction’> || <‘flex-wrap’>,由flex-direction和flex-wrap两个属性复合的属性,默认是row nowrap

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>

    (5)justify-content:默认值:flex-start;

    比如:子元素自己的宽高生效,父级:justify-content:center;

        <style>
            .container{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                width: 400px;
                height: 400px;
                border: 1px solid black;          
            }
            .item{
                width: 100px;
                height: 100px;
                border: 1px solid black;
            }
    
        </style>
        <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 项目 -->
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        </body>

    6)在侧轴上如何对齐:align-items:stretch(默认值)

    注意:stretch值在有height值时,height值决定高度

    当子元素中无height值时,效果:

    主要看下两个轴的时,效果:

    因为有两行,第一行占容器的上半区,第二行占容器的下半区,每一行都在自己的半区居中。

    (7)align-content:stretch(默认值)

    注意:当只有一行flex项时,此属性不起作用。

    该属性在多行下,设置每一行在容器的排列。

    比如:align-content:flex-start

    4. “项目”中的属性

    注意:子级元素设置的宽是100px,但是盒模型的宽却是78px,要注意的是,width值的存在意义重大,尤其是计算布局时。

    (1)order:number;该子级的先后顺序中排第几位

    默认情况下,每一个子级按照标签的先后顺序在页面中布局,但是order可以改变子级在页面中的先后顺序。

    比如:

        <style>
            .container{
                display: flex;
                width: 400px;
                height: 400px;
                border: 1px solid black;          
            }
            .item{
                width: 100px;
                height: 100px;
                border: 1px solid black;
            }
            .item:nth-of-type(1){
                order: 5
            }
            .item:nth-of-type(2){
                order: 4
            }
            .item:nth-of-type(3){
                order: 3
            }
            .item:nth-of-type(4){
                order: 2
            }
            .item:nth-of-type(5){
                order: 1
            }
        </style>
        <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 项目 -->
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        </body>

    (2)flex-grow:number;子级在该行中所占的剩余空间比例。

    剩余空间:就是子级的原始盒模型(设置的border+padding+content值)要是没有剩余空间,该值是无效的

    比如:.item:nth-of-type(5){ flex-grow: 2; }

    但是效果:因为没有剩余空间,所以flex-grow是无效的。同时,该例子中,

    (3)flex-shrink:number;每一行中,子元素按原始盒模型排列后,超出“容器”的部分,按照比例大小进行收缩(砍掉),每个子元素中该值越大,被砍掉的越多,默认值为1

    比如:上面图片效果中,5个子元素的flex-shrink都是默认值1,所以,都被等比例的砍掉了一部分

    无意中,发现一个知识点:

    如果子元素中,原始盒模型 > flex盒模型,内容是数字或者英语单词,且数字或英语单词过长,超过了flex盒模型的宽度,那么内容会撑开flex盒模型的宽度,直到原始盒模型的width值,内容如果继续增长,flex盒模型的宽度,不再增大,内容溢出。同时其他的子元素的flex盒模型重新计算布局。

    如果子元素的原始盒模型 < flex盒模型,那么无上述效果。

    (4)flex-basis:length | 0 | auto,(auto是默认值)

    1)当值是:length长度的时候,它可以是长度(例如20%,5rem,10px等),flex-basis属性设置子元素的宽或高,当然width也是设置子元素的原始盒模型的宽,flex-basis值会替代width值

    比如:第一个子元素设置:flex-basis:120px,那么第一个子元素的原始盒模型width = 120px,将剩余空间进行分配后,每个子元素的获得24.67的宽度。所以结果如下图:

        <style>
            .container{
                display: flex;
                width: 400px;
                height: 400px;
                border: 1px solid black;          
            }
            .item{
                width: 100px;
                height: 100px;
                border: 1px solid black;
            }
            .item:nth-of-type(1){
                flex-grow: 1;
                flex-basis: 120px;
            }
            .item:nth-of-type(2){
                flex-grow: 1;
            }
            .item:nth-of-type(3){
                flex-grow: 1;
            }
        </style>
        <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 项目 -->
            <div class="item">1 内容区:144.67*102</div>
            <div class="item">2 内容区:124.67*102</div>
            <div class="item">3 内容区:124.67*102</div>
        </div>
        </body>

    2)那么当flex-basis:0时,相当于原始width的值是0;上述代码中的第一个子元素的flex-basis:0;结果:

    因为第一个子元素的宽度是66.67,小于 原始盒模型的width值100px,所以当第一个子元素内容是数字或者单词的时候,若数字或单词的长度大于了flex盒模型的宽度,那么flex的盒模型的宽度会随着单词或数字的长度增大,直至原始盒模型的width100px。

     3)flex-basis:auto;默认值。

    (5) flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 

    这是速记flex-grow, flex-shrinkflex-basis组合。第二个和第三个参数(flex-shrinkflex-basis)是可选的。默认是0 1 auto

    (6)align-self:允许子元素对容器的align-items属性进行覆盖设置

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

    请注意floatclear、column、vertical-align等属性对弹性无效。

    展开全文
  • 今日发现 ...父元素displayflex时,子元素float直接失效 补充: 当父元素的display属性为flex时,以下几种属性会失效 1.float(浮动)会失效 2.clear(清除)会失效 3.text-align(文本排列)会失效

    今日发现

    父元素display 为flex时,子元素float直接失效

    补充:

    当父元素的display属性为flex时,以下几种属性会失效

    1.float(浮动)会失效

    2.clear(清除)会失效

    3.text-align(文本排列)会失效

    展开全文
  • Document 伸缩比例 flex 1 2 3 伸缩比例 flex, 设置第一个盒子不参与划分,后面的空间给后面2个子盒子按指定比例分割 1 2 3 demo 效果:
  • 1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,...
  • CSSdisplayflex和inline-flex的区别

    千次阅读 2019-06-20 10:22:34
    display: flex 将对象作为弹性伸缩盒显示 display: inline-flex 将对象作为内联块级弹性伸缩盒显示 flex 效果: 没有为父元素设置宽度,所以父元素的宽度为100%,而高度则是由子元素撑开,既高...
  • 1,css实现文本超出…出现省略号 文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:...2,display:flex布局强制换行 ul { width: 100%; display: flex; flex-wrap: wrap; // 强制换行 } .
  • html+css:display:flex属性

    万次阅读 多人点赞 2018-09-10 11:12:08
    网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,...
  • css3 display:flex水平或者垂直均分用法

    千次阅读 2018-09-06 14:35:00
    父标签: display: flex; flex-direction:column;(row为水平方向,column为垂直方向); 子类标签:flex: 1; 转载于:https://www.cnblogs.com/zzwlong/p/9598207.html
  • css display:flex 属性

    多人点赞 2019-09-05 14:00:28
    css display:flex 属性 一:display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到...
  • CSS3中的display属性的Flex 布局

    千次阅读 2018-07-07 11:26:00
    Flex 是 Flexible Box 的缩写 ,意思是 ”弹性布局”,用来为盒子模型提供最大的灵活性。设置flex布局后,子元素的float、clear 和vertical-align 属性将失效。基本概念使用flex布局的元素称作flex容器,简称“容器...
  • display: flex; 子元素添加 align-self: center 示例 <div class='father'> <div class='child'></div> </div> <style> .father { background: #ff6b89; height: 600px; ...
  • css display: flex 横向滚动

    千次阅读 2020-10-15 11:44:40
    display: flex; height: 1.5rem; overflow: scroll; white-space:nowrap; } .css-self { margin-left: .22rem; background-color: darkgray; } <div class="css-jc"> <div class="css-flex"> ...
  • 弹性布局display: flex;垂直方向布局的具体实践。 在父级设置: display: flex;将对象作为弹性伸缩盒显示 flex-flow: column;方向设置为垂直方向 父级需设置高度 在子级设置占比: flex: 1;按占比分配非设置...
  • 先用一句话秒懂display:Flex;这句css代码,如图: 下面引用篇文章详细说—— 原文作者:阮一峰 日期:2015年7月10日 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖...
  • 1.display:inline-block布局 常见块级元素 常见行内元素 一:display的几个常用的属性值 inline(行内元素) 1.使元素变成行内元素,可以与其他行内元素共享一行,不会独占一行 2.不能更改元素的height,width的...
  • flex-shrink: 0; width: 100rpx;
  • CSS-flex流式布局

    千次阅读 2019-06-12 16:19:49
    flex-wrap align-items justify-content 比较常用的项目属性是: flex-grow align-self 一个普通的使用样例 <!DOCTYPE html> <html> <head> <title>flex practice</t...
  • display: -webkit-flex; /* 新版本语法 Chrome 21+ */ display: flex; /* 新版本语法 Opear 12.1 Firefox 22+ */ display: -webkit-box; /* 新版本语法 Safari, ios, Android browser, older Webkit browsers. ...
  • CSS flex 布局里面的靠右对齐

    万次阅读 2019-10-30 10:33:34
    使用 flex 布局后,利用下面样式靠右显示: justify-content: flex-end; 无效的原因是,在设置靠右对齐时,一定要设置左边对齐为自动: margin-left: auto;
  • <div class="operate-content"> <el-button type="primary" size="small" class="search_btn" :loading="search_loading" @click="search()" icon="el-icon-search" ...
  • 今天做项目遇到一个问题:ul标签下有若干个li标签(个数不固定),想要实现平均...于是想到了使用display:flex;justify-content:space-between;align-items:center;(有浏览器兼容问题) 但出现了如下问题: li标...
  • CSS-使用Flex实现元素以宽高比缩放

    千次阅读 2020-08-10 20:23:41
    问题:元素宽度随着浏览器改变时, 高度仍然保持不变,致使内部图片变形; 上下padding的值,相对于最近父级的宽 2:flex布局,未设置高的具体值的时候,其值等于子级内容最大的高度 ...css定宽高比 flex + 伪类 + p
  • css之dispaly:flex;多行多列

    万次阅读 2017-10-02 11:44:39
    之前不了解displayflex;最近看了看书,简单的整理了下,于是就产生了这篇文章 flex弹性布局可以简便,完整,响应式的实现各种页面的布局,而且现在也得到了所有浏览器的支持,实在是布局很便利的工具呢。 一、...
  • 主要的思想就是,先在state中存储,然后在点击事件中使用setstate改变字和状态,其中原本显示用的是block但是,display:block会改变flex布局的效果,所以这里可以直接用flex代替block,flex有默认的显示效果 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,087
精华内容 29,634
关键字:

cssdisplayflex