• 博客

                                </a></li><li class="" title="高价值源码课程分享"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://download.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.6907&quot;}" data-report-query="spm=3001.6907" href="https://download.csdn.net/">下载</a></li><li class="" title="系统学习·问答·比赛"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://edu.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.4482&quot;}" data-report-query="spm=3001.4482" href="https://edu.csdn.net/">学习</a></li><li class="" title="找到志同道合的伙伴"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://bbs.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.6068&quot;}" data-report-query="spm=3001.6068" href="https://bbs.csdn.net/">社区</a></li><li class="" title="开源代码托管"><a data-report-click="{&quot;mod&quot;:&quot;&quot;,&quot;dest&quot;:&quot;https://gitcode.net/gitcode/1024opensource?utm_source=csdn_toolbar&quot;,&quot;spm&quot;:&quot;3001.6768&quot;}" data-report-query="spm=3001.6768" href="https://gitcode.net/gitcode/1024opensource?utm_source=csdn_toolbar">GitCode</a></li><li class="" title="简单高效优惠的云服务"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://bbs.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.8290&quot;}" data-report-query="spm=3001.8290" href="https://dev-portal.csdn.net/welcome?utm_source=toolbar">云服务</a></li><li class="" title="程序员的如意兵器"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://devbit.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.8967&quot;}" data-report-query="spm=3001.8967" href="https://devbit.csdn.net?source=csdn_toolbar">猿如意</a></li></ul></div><div class="toolbar-container-middle"><div class="toolbar-search onlySearch"><div class="toolbar-search-container"><span class="icon-fire"></span><input id="toolbar-search-input" maxlength="2000" autocomplete="off" type="text" value="" placeholder="display:flex" style="text-indent: 32px;"><div class="gradient"></div><button id="toolbar-search-button"><i></i><span>搜索</span></button><input type="password" autocomplete="new-password" readonly="" disabled="true" style="display: none; position:absolute;left:-9999999px;width:0;height:0;"></div></div></div><div class="toolbar-container-right"><div class="toolbar-btns onlyUser"><div class="toolbar-btn toolbar-btn-login csdn-toolbar-fl toolbar-subMenu-box"><a class="hasAvatar" data-report-click="{&quot;spm&quot;: &quot;3001.5343&quot;}" data-report-query="spm=3001.5343" href="https://blog.csdn.net/qq_51489068"><img src="https://profile.csdnimg.cn/A/0/F/2_qq_51489068"></a><div id="csdn-toolbar-profile" class="csdn-toolbar-plugin"><div class="csdn-profile-top"><a class="csdn-profile-avatar" data-report-click="{&quot;spm&quot;: &quot;3001.5343&quot;}" data-report-query="spm=3001.5343" href="https://blog.csdn.net/qq_51489068"><img src="https://profile.csdnimg.cn/A/0/F/0_qq_51489068"></a><p class="csdn-profile-nickName">是Mary呀~</p><a data-report-click="{&quot;spm&quot;: &quot;3001.5344&quot;}" data-report-query="spm=3001.5344" href="https://mall.csdn.net/vip" class="csdn-profile-no-vip"></a></div><div class="csdn-profile-mid"><a data-report-click="{&quot;spm&quot;: &quot;3001.5347&quot;}" data-report-query="spm=3001.5347" href="https://blog.csdn.net/qq_51489068?type=sub&amp;subType=fans"><i class="csdn-profile-fansCount">1</i>粉丝</a><a data-report-click="{&quot;spm&quot;: &quot;3001.5348&quot;}" data-report-query="spm=3001.5348" href="https://blog.csdn.net/qq_51489068?type=sub"><i class="csdn-profile-followCount">45</i>关注</a><a data-report-click="{&quot;spm&quot;: &quot;3001.5349&quot;}" data-report-query="spm=3001.5349" href="https://blog.csdn.net/qq_51489068"><i class="csdn-profile-likeCount">5</i>获赞</a></div><div class="csdn-profile-bottom"><ul class="csdn-border-bottom"><li class=""><a href="https://i.csdn.net/#/user-center/profile" data-report-click="{&quot;dest&quot;:&quot;https://i.csdn.net/#/user-center/profile&quot;,&quot;spm&quot;:&quot;3001.5111&quot;}" data-report-query="spm=3001.5111"><i class="csdn-profile-icon csdn-profile-icon-person"></i>个人中心</a></li><li class=""><a href="https://mp.csdn.net/mp_blog/manage/article?spm=1011.2124.3001.5298" data-report-click="{&quot;dest&quot;:&quot;https://mp.csdn.net/mp_blog/manage/article?spm=1011.2124.3001.5298&quot;,&quot;spm&quot;:&quot;3001.5448&quot;}" data-report-query="spm=3001.5448"><i class="csdn-profile-icon csdn-profile-icon-pages"></i>内容管理</a></li><li class=""><a href="https://edu.csdn.net?utm_source=edu_txxl_mh" data-report-click="{&quot;dest&quot;:&quot;https://edu.csdn.net?utm_source=edu_txxl_mh&quot;,&quot;spm&quot;:&quot;3001.5350&quot;}" data-report-query="spm=3001.5350"><i class="csdn-profile-icon csdn-profile-icon-study"></i>我的学习</a></li><li class=""><a href="https://mall.csdn.net/myorder" data-report-click="{&quot;dest&quot;:&quot;https://mall.csdn.net/myorder&quot;,&quot;spm&quot;:&quot;3001.5137&quot;}" data-report-query="spm=3001.5137"><i class="csdn-profile-icon csdn-profile-icon-order"></i>我的订单</a></li><li class=""><a href="https://i.csdn.net/#/wallet/index" data-report-click="{&quot;dest&quot;:&quot;https://i.csdn.net/#/wallet/index&quot;,&quot;spm&quot;:&quot;3001.5136&quot;}" data-report-query="spm=3001.5136"><i class="csdn-profile-icon csdn-profile-icon-wallet"></i>我的钱包</a></li><li class=""><a href="https://dev-portal.csdn.net/welcome?utm_source=toolbar_user_profile" data-report-click="{&quot;dest&quot;:&quot;https://dev-portal.csdn.net/welcome?utm_source=toolbar_user_profile&quot;,&quot;spm&quot;:&quot;3001.7345&quot;}" data-report-query="spm=3001.7345"><i class="csdn-profile-icon csdn-profile-icon-API"></i>我的云服务</a></li><li class="pb-8 csdn-border-bottom"><a href="https://ac.csdn.net/user/myCert.html" data-report-click="{&quot;dest&quot;:&quot;https://ac.csdn.net/user/myCert.html&quot;,&quot;spm&quot;:&quot;3001.7346&quot;}" data-report-query="spm=3001.7346"><i class="csdn-profile-icon csdn-profile-icon-ac"></i>我的认证</a></li><li class="pt-8 pb-8 csdn-border-bottom"><a href="https://i.csdn.net/#/uc/reward" data-report-click="{&quot;dest&quot;:&quot;https://i.csdn.net/#/uc/reward&quot;,&quot;spm&quot;:&quot;3001.5351&quot;}" data-report-query="spm=3001.5351"><i class="csdn-profile-icon csdn-profile-icon-draw"></i>签到抽奖</a></li><li class="pt-8 csdn-profile-logout"><a href="javascript:;" data-report-click="{&quot;spm&quot;:&quot;3001.5139&quot;}" data-report-query="spm=3001.5139"><i class="csdn-profile-icon csdn-profile-icon-logout"></i>退出</a></li></ul></div></div></div><div class="toolbar-btn toolbar-btn-vip csdn-toolbar-fl"><a data-report-click="{&quot;mod&quot;:&quot;popu_336&quot;,&quot;dest&quot;:&quot;https://mall.csdn.net/vip&quot;,&quot;spm&quot;:&quot;3001.4496&quot;}" data-report-query="spm=3001.4496" href="https://mall.csdn.net/vip">会员中心 <img style="position: relative; vertical-align: middle; width: 14px; top: -2px; left: 0px;;display:inline-block" "="" src="https://img-home.csdnimg.cn/images/20210918025138.gif"></a><div id="csdn-plugin-vip" style="background:url(https://img-home.csdnimg.cn/images/20210826055049.png) no-repeat center center; background-size: cover;" }=""><div class="csdn-plugin-vip-header">会员特权</div><div class="csdn-plugin-vip-body"><a href="https://mall.csdn.net/vip?utm_source=vip_hyzx_hytbcj#draw"><i class="csdn-plugin-vip-icon" style="background:url(https://img-home.csdnimg.cn/images/20220215105130.png);background-size: contain;"></i><br>抽豪礼</a><a href="https://mall.csdn.net/vip?utm_source=vip_pc_hybjt"><i class="csdn-plugin-vip-icon" style="background:url(https://img-home.csdnimg.cn/images/20210826043936.png);background-size: contain;"></i><br>领券中心</a><a href="https://mall.csdn.net/vip?utm_source=vip_hyzx_fc_xsjz"><i class="csdn-plugin-vip-icon" style="background:url(https://img-home.csdnimg.cn/images/20211115095959.png);background-size: contain;"></i><br>赠1年</a><a href="https://vip.csdn.net/welfarecenter?utm_source=vip_hyzx_hytblq#discount_center"><i class="csdn-plugin-vip-icon" style="background:url(https://img-home.csdnimg.cn/images/20210826043937.png);background-size: contain;"></i><br>会员购</a></div><div class="csdn-plugin-vip-footer">                <a data-report-click="{&quot;spm&quot;: &quot;3001.6440&quot;}" data-report-query="spm=3001.6440" class="csdn-plugin-vip-footer-link" href="https://mall.csdn.net/vip">领取限时优惠券,最高可减80元<i></i></a><a data-report-click="{&quot;spm&quot;: &quot;3001.6439&quot;}" data-report-query="spm=3001.6439" class="csdn-plugin-vip-footer-btn" href="https://mall.csdn.net/vip">领券开通</a></div></div></div><div class="toolbar-btn toolbar-btn-collect csdn-toolbar-fl"><a data-report-click="{&quot;spm&quot;:&quot;3001.7480&quot;}" data-report-query="spm=3001.7480" href="https://i.csdn.net/#/user-center/collection-list?type=1">足迹</a><div id="csdn-toolbar-collection" class="csdn-toolbar-plugin" style="display: none;"><div class="toolbar-collection-left csdn-toolbar-scroll-box"><ul><li class="collection-folder-active"><div class="toolbar-collection-folder-name">浏览历史</div></li><li><div class="toolbar-collection-folder-name">默认收藏夹</div><div class="toolbar-collection-folder-count">7</div></li><li><div class="toolbar-collection-folder-name">前端</div><div class="toolbar-collection-folder-count">74</div></li><li><div class="toolbar-collection-folder-name">JAVA</div><div class="toolbar-collection-folder-count">29</div></li></ul></div><div class="toolbar-collection-right"><ul class="csdn-toolbar-scroll-box"><li><a href="https://blog.csdn.net/weixin_39717076/article/details/82586915" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">html+css:display:flex属性</span></a></li><li><a href="https://blog.csdn.net/weixin_45761317/article/details/103847965" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">HTML &lt;col&gt; 标签 的详细用法</span></a></li><li><a href="https://blog.csdn.net/huhu123444/article/details/116072220" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">equals用法</span></a></li><li><a href="https://blog.csdn.net/weixin_34323858/article/details/93453218" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">equals方法使用技巧</span></a></li><li><a href="https://blog.csdn.net/kqqkqq123/article/details/97000564" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">正确使用 equals 方法</span></a></li><li><a href="https://blog.csdn.net/qq_35871335/article/details/90294091" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">ant design 中table,column中的text,record的意思</span></a></li><li><a href="https://blog.csdn.net/m0_37989980/article/details/104208029" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">JSON——概述、JSON语法、序列化和反序列化</span></a></li><li><a href="https://blog.csdn.net/qq_51489068/article/details/127764749" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">antd组件:Table表格去掉表格边框线,#字类型表格</span></a></li><li><a href="https://blog.csdn.net/qq_24265945/article/details/81453503" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">Git改名字和邮箱</span></a></li><li><a href="https://blog.csdn.net/awodefengduanwu/article/details/116306496" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">Git如何修改提交(commit)用户名称(user.name)</span></a></li><li><a href="https://ask.csdn.net/questions/7519805" target="_blank"><span class="toolbar-collection-type">问答</span><span class="toolbar-collection-title">antd table滚动条控制定位功能</span></a></li><li><a href="https://blog.csdn.net/qq_65715980/article/details/125379213" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">CSS中选择器使用方法(1)</span></a></li><li><a href="https://blog.csdn.net/weixin_30267691/article/details/96296507" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">js变量前的+是什么意思</span></a></li><li><a href="https://blog.csdn.net/qq_51489068/article/details/125449818" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">Vue启动项目报错:Can‘t resolve ‘xxx‘ in ‘D:\briup\vue_test\node_modules\send‘</span></a></li><li><a href="https://blog.csdn.net/qq_51489068/article/details/124817137" target="_blank"><span class="toolbar-collection-type">博客</span><span class="toolbar-collection-title">CSS-动画-animiation的使用加淘宝首页轮播案例</span></a></li></ul><a class="toolbar-collection-more">查看更多<i></i></a></div><div class="csdn-toolbar-plugin-triangle"></div></div></div><div class="toolbar-btn toolbar-btn-dynamic csdn-toolbar-fl toolbar-dynamic-box"><a data-report-click="{&quot;spm&quot;:&quot;3001.4507&quot;}" data-report-query="spm=3001.4507" href="https://blink.csdn.net">动态</a><div class="toolbar-dynamic-subMenu"><a class="vote-item" data-report-click="{&quot;spm&quot;:&quot;3001.8379&quot;}" data-report-query="spm=3001.8379" href="https://blink.csdn.net/?source=vote"><span class="pos-rel">投票<i style="display: inline;"></i></span></a></div></div><div class="toolbar-btn toolbar-btn-msg csdn-toolbar-fl"><div class="toolbar-subMenu-box"><a data-report-click="{&quot;spm&quot;:&quot;3001.4508&quot;}" data-report-query="spm=3001.4508" id="toolbar-remind" href="https://i.csdn.net/#/msg/index"><span class="pos-rel">消息<i class="toolbar-msg-count"></i></span></a><div class="toolbar-subMenu"><a data-type="comment" href="https://i.csdn.net/#/msg/index"><span class="pos-rel">评论和@<i></i></span></a><a data-type="attention" href="https://i.csdn.net/#/msg/attention"><span class="pos-rel">新增粉丝<i></i></span></a>         <a data-type="like" href="https://i.csdn.net/#/msg/like"><span class="pos-rel">赞和收藏<i></i></span></a><a data-type="chat" href="https://im.csdn.net/im/main.html"><span class="pos-rel">私信<i></i></span></a><a data-type="notice" href="https://i.csdn.net/#/msg/notice"><span class="pos-rel">系统通知</span></a><a href="https://i.csdn.net/#/msg/setting">消息设置</a></div></div><div class="toolbar-msg-box"></div></div><div class="toolbar-btn toolbar-btn-dynamic csdn-toolbar-fl toolbar-mp-menubox"><a title="创作中心" data-report-click="{&quot;dest&quot;:&quot;https://mp.csdn.net/&quot;,&quot;spm&quot;:&quot;3001.8539&quot;}" data-report-query="spm=3001.8539" href="https://mp.csdn.net/">创作中心<img src="https://img-home.csdnimg.cn/images/20220627041202.png" class="icon-mp-menu"></a></div><div class="toolbar-btn toolbar-btn-write csdn-toolbar-fl toolbar-subMenu-box"><a data-report-click="{&quot;spm&quot;:&quot;3001.4503&quot;}" data-report-query="spm=3001.4503" href="https://mp.csdn.net/edit"><i></i>发布<i></i></a></div></div></div></div></div></div><script>var toolbarSearchExt = '{"landingWord":[],"queryWord":"display:flex","tag":[],"title":"html+css:display:flex属性"}';</script>
    <script src="https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript"></script>
    <script>
    (function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);
    })();
    </script>
    

html+css:display:flex属性

蜗牛小前 于 2018-09-10 11:12:08 发布 33853 已收藏 623

分类专栏: CSS
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_39717076/article/details/82586915

版权

    <div id="blogColumnPayAdvert"><div class="column-group"><div class="column-group-item column-group0 column-group-item-one"><div class="item-l"><a class="item-target" href="https://blog.csdn.net/weixin_39717076/category_7914855.html" target="_blank" title="CSS" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}"><img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt=""><span class="title item-target"><span><span class="tit">CSS</span><span class="dec">专栏收录该内容</span></span></span></a></div><div class="item-m"><span>7 篇文章</span><span>1 订阅</span></div><div class="item-r"><a class="item-target article-column-bt articleColumnFreeBt" data-id="7914855">订阅专栏</a></div></div></div></div>
<article class="baidu_pl"><div id="article_content" class="article_content clearfix"><link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css"><div id="content_views" class="htmledit_views"><h1 id="page-title"><a name="t0"></a><a href="https://so.csdn.net/so/search?q=Flex&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=Flex&amp;spm=1001.2101.3001.7020&quot;,&quot;extra&quot;:&quot;{\&quot;searchword\&quot;:\&quot;Flex\&quot;}&quot;}" data-tit="Flex" data-pretit="flex">Flex</a> 布局教程:语法篇</h1>

原博客地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网页布局(layout)是CSS的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。

以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

 
  1. .box{

  2. display: flex;

  3. }

行内元素也可以使用Flex布局。

 
  1. .box{

  2. display: inline-flex;

  3. }

Webkit内核的浏览器,必须加上-webkit前缀。

 
  1. .box{

  2. display: -webkit-flex; /* Safari */

  3. display: flex;

  4. }

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

二、基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

 
  1. .box {

  2. flex-direction: row | row-reverse | column | column-reverse;

  3. }

它可能有4个值。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

 
  1. .box{

  2. flex-wrap: nowrap | wrap | wrap-reverse;

  3. }

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

 
  1. .box {

  2. flex-flow: <flex-direction> || <flex-wrap>;

  3. }

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

 
  1. .box {

  2. justify-content: flex-start | flex-end | center | space-between | space-around;

  3. }

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

 
  1. .box {

  2. align-items: flex-start | flex-end | center | baseline | stretch;

  3. }

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

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

 
  1. .box {

  2. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  3. }

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

 
  1. .item {

  2. order: <integer>;

  3. }

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

 
  1. .item {

  2. flex-grow: <number>; /* default 0 */

  3. }

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

 
  1. .item {

  2. flex-shrink: <number>; /* default 1 */

  3. }

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

 
  1. .item {

  2. flex-basis: <length> | auto; /* default auto */

  3. }

它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

 
  1. .item {

  2. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  3. }

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

 
  1. .item {

  2. align-self: auto | flex-start | flex-end | center | baseline | stretch;

  3. }

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

(完

</article>
蜗牛小前
已关注 关注

  • 133

    点赞
  • 623
    收藏
  • 打赏
  • 8
    评论
  • html+css:display:flex属性
    Flex 布局教程:语法篇原博客地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,...

    复制链接

    扫一扫

                    </div><div class="share-code-type"><p class="hot" data-type="hot"><span>热门</span></p><p class="vip" data-type="vip"><span>VIP</span></p></div></div></li></ul></div><div class="toolbox-right"><div class="tool-directory"><a class="bt-columnlist-show" data-id="7914855" data-free="true" data-subscribe="false" data-title="CSS" data-img="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" data-url="https://blog.csdn.net/weixin_39717076/category_7914855.html" data-sum="7" data-people="1" data-price="0" data-oldprice="0" data-join="false" data-studyvip="false" data-studysubscribe="false" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6334&quot;,&quot;extend1&quot;:&quot;专栏目录&quot;}">专栏目录</a></div></div>
    </div>
    

displayflex 属性使用详解
极客神殿
05-21 3533

flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了。今天我们只是学习学习,忽略一些不重要的东西。

首先flex的使用需要有一个父容器,父容器中有几个items.

父容器:container

属性

display:flex;/flex块级,inline-flex:行内快/

justify-content:space-around;/center:水平居中,flex-…

display- flex详解
热门推荐

~★sunshine☆的博客专栏
04-16 8万+

https ://blog.csdn.net/dxnn520/article/details/79342637 display flex是什么?微信小程序最近火的不要不要的,下载开发工具测试了一下,小程序对 css支持很好, 布局使用 display flex布局火力强大,不太了解或者对 flex布局比较生疏的童靴分享一下 display flex部分知识 display flex是将对象作为弹性伸缩盒显示。(...
评论 8 条 写评论
a825905220 热评

太有价值得分享了

评论
写评论

display : flex 布局_Vodka~的博客_ display : flex;
11-13

flex-wrap 容器内元素的换行(默认不换行) 1 : flex-wrap : nowrap; (默认)元素不换行,比如 :一个div宽度100%,设置此 属性,2个div宽度就自动变成各50%; 2 : flex-wrap : wrap; 元素换行,比如 :一个div宽度100%,设置此 属性,第二个div就...

display : flex自我理解_菜鸟小白Y的博客_ display : flex是...
11-13

between是中间的意思,意思是多余的空白间距只在元素中间区域分配。 space-around : around是环绕的意思,意思是每个 flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只 有中间空白宽度一半。 space-evenly : evenly是...

display : flex 属性
最新发布

wangshuaibinggg的博客
10-07 62

这是什么玩意儿?

弹性布局( display : flex;) 属性详解
GuoGuoABC
04-10 2684

Flexbox是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元素装入容器

display : flex 属性_weixin_46380993的博客_ display flex
11-9

FlexFlexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 flex布局。 1 :先来了解一下 display : flex 正常情况下 在一个盒子中,放置4个div,设置高度,宽度继承父元素,呈现如图排列方...
页面布局--- display : flex详解_卡布达吃西瓜的博客_页面布局...
11-9

/*设置默认不换行*//* flex-wrap :nowrap;*/.content{width :300px;height :300px;background-color :brown;/* 新加的代码 */ display : flex; flex-direction :row; flex-wrap :nowrap;} 其样式如此 ...
Flex布局常用 属性
Bemege的博客
06-02 1463

个人整理的常用 flex 属性,分享到CSDN方便大家也方便一下自己
flex使用学习
weixin_30615767的博客
03-31 99

1.指定容器为 flex布局 display : flex 行内元素也可以使用 Flex布局。 display : inline- flex; 注意,设为 Flex布局以后,子元素的float、clear和vertical-align 属性将失效。 容器默认存在两根轴: 水平主轴 垂直的交叉轴 2.以下6个 属性设置在容器上。 flex-direction flex-wrap

flex-flow:flex-flo…

[实用] CSS3 display : flex 使用指南_和泉纱雾·的博客
11-2

简单介绍 CSS 里的 display : flex的使用 一、 display : flex 是什么? display : flex 对我来说,是一个很好用的前端布局代码( 可以在前端弹性布局UI 配合Chrome 谷歌浏览器 的开发者模式,可以自由实现你所想的页面布局 ...
display flex 左右_ css display : flex 属性
weixin_33387339的博客
02-01 1365

一: display : flex 布局 display : flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 FlexFlexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为 Flex布局以后,子元素的float、clear和vertical-align...
CSSdisplay : flex说明
白袍小将的博客
08-11 3109

在进行网页前端设计时,需要垂直居中显示文本,但CCS似乎没有明确的垂直居中的代码方法,由于目前的页面不再考虑以前的浏览器了,因此采用 CSS3的 display : flex方法来实现。现记录一下 flex 属性的相关资料。

FlexFlexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

它即可以应用于容器中,也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年,W3C提出了

什么是弹性( display : flex)布局 ?
weixin_41044151的博客
02-25 3万+

display : flex 意思是弹性布局,它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。 FlexFlexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex布局。 .box{ display : flex; }

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
它可以用于以下四个方面:
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将

display : flex详解
Anony_me的博客
06-29 2097

1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐() 属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐3. 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。(1) flex-direction的值有 : :横向从左到右排
flex 布局
bangongzan0053的博客
05-03 118

flex入门 FlexFlexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 容器的 属性 flex-direction

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向…

弹性布局 flex 属性详解
人人都在发奋的博客
12-03 1万+

注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是、和 属性的简写 属性
html5中 display flex, display : flex 属性
weixin_34509196的博客
06-16 1925

用弹性和布局时, displayflex可以和 display:non弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。 让一个盒子具有弹性布局的 属性,要先给其加上样式 display : flex;OK我们也会看H5 display : flex使本元素的height无效初学者学习H5时遇到关于displ...
displayflex 属性
weixin_42811773的博客
03-05 1462

flexflexible box)弹性布局,设置此 属性后,子元素的float,clear,vertical-align 属性失效。可以应用于容器或者行内元素。 容器中的6个 属性: (1) flex-direction:容器中项目的排列方向(默认为横向) 可以取值为:row /row-reverse /column /column-reverse (2) flex-wrap:容器内项目换行方式(默认不换...
flex的项目 属性
在车上在路上的博客
11-25 860

flex布局经常会用到,但是经常见到一些类似 { flex : 1; flex-shrink : 0}之类的 属性,以前没怎么关注过,今天整体对照着看了一遍,做一个记录。 首先我们平时使用的{ display : flex;justify-content :center;align-items :center;}这些是容器 属性,也就是父级元素里面设置的,但是如果我们想对某一项子级元素单独设置 属性,这就要用到 flex的项目 属性了。 1.order 属性设置 {order : 数字;} 当给子项添加了该 属性,他们会按照order属
flex 属性
webshady的博客
04-12 3479

一、定义

采用flex布局的元素,称为flex容器,里面的子元素为item。

二、语法

(1)块级元素: displayflex

(2)行内元素: display:inline-flex

设为flex布局以后,flex item的float、clear、vertical-align属性将失效

三、flex容器的属性

     容器<em>属性</em>说明<em>flex</em>-direction决定主轴的方向(项目的排列方向)..</div></a></div>
</div>
Css display 属性详解
HaoNanEr1989的博客
06-20 2966

Css display 属性详解
flex布局常用 属性
初郁
04-05 907

原文:https ://blog.csdn.net/u012620506/article/details/52369653

Flex布局父容器属性

flex-direction / flex-wrap/flex-flow/justify-content /align-items/align-content

1》水平(主轴上)对齐方式:

justify-content:flex-start | flex-end | center | space-between | space-around…

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
  • 关于我们
  • 招贤纳士
  • 商务合作
  • 寻求报道
  • 400-660-0108
  • kefu@csdn.net
  • 在线客服
  • 工作时间 8:30-22:00
  • 公安备案号11010502030143
  • 京ICP备19004658号
  • 京网文〔2020〕1039-165号
  • 经营性网站备案信息
  • 北京互联网违法和不良信息举报中心
  • 家长监护
  • 网络110报警服务
  • 中国互联网举报中心
  • Chrome商店下载
  • 账号管理规范
  • 版权与免责声明
  • 版权申诉
  • 出版物许可证
  • 营业执照
  • ©1999-2022北京创新乐知网络技术有限公司

热门文章

  • html+css:display:flex属性 33846
  • js:判断各个浏览器 24562
  • flex 靠左靠右如何布局? 24028
  • web本地存储(localStorage、sessionStorage) 21263
  • ztree Api官方文档 20124

分类专栏

  • Linux 7篇
  • SVG 1篇
  • TCP/IP 1篇
  • Javascript 23篇
  • 问题 23篇
  • 代码集 51篇
  • layui 2篇
  • IDE 2篇
  • Git 3篇
  • 开发集 6篇
  • 前端与SEO 1篇
  • 日志 1篇
  • MySql 10篇
  • 文档API 2篇
  • node.js 10篇
  • vue.js 5篇
  • 高德地图 1篇
  • 正则表达式 5篇
  • 插件库 10篇
  • CSS 7篇
  • 前端性能 3篇
  • 前端面试基本知识 2篇
  • jQuery代码集
  • 重要API 1篇
  • svn 1篇
  • HTML 2篇
  • ie兼容性 1篇
  • 移动端 2篇
  • 数组处理 4篇
  • 流式布局 1篇
  • Less 1篇
  • 设计
  • Thinkphp 1篇
  • 开发环境 1篇
  • PHP 14篇
  • 阿里云

最新评论

  • js 毫秒整数转化为时分秒

    luoqifa: function formatTime(value) { let time = parseFloat(value); if (!time || NaN === time || time < 0) { time = 0; } let h = parseInt(time) / 3600 < 0 ? ('0' + parseInt(time / 3600)) : parseInt(time / 3600); let ms = parseInt(time % 3600 / 60); let m = (ms < 10) ? ('0' + ms) : ms; let ss = parseInt(time % 60); let s = (ss < 10) ? ('0' + ss) : ss; time = h + ':' + m + ':' + s; return time; }

  • js 时间戳转化为时分秒

    未来,你好: 这行改成 var seconds = parseInt(data % (1000 * 60)) / 1000; 不用谢我叫雷锋

  • js 时间戳转化为时分秒

    未来,你好: var seconds = parseInt(data % (1000 * 60)) / 1000;不用谢我叫雷锋

  • html+css:display:flex属性

    a825905220: 太有价值得分享了

  • CSS判断横竖屏幕方法:

    异想之旅: 楼主是不是开发手机端的哈哈哈哈

您愿意向朋友推荐“博客详情页”吗?

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • JWT-auth的原理以及laravel中tymon/jwt-auth的安装使用
  • Linux下的SVN服务器搭建
  • SVG path路径标记
2022年1篇
2021年5篇
2020年6篇
2019年29篇
2018年168篇

目录

  1. Flex 布局教程:语法篇
    1. 一、Flex布局是什么?
    2. 二、基本概念
    3. 三、容器的属性
      1. 3.1 flex-direction属性
      2. 3.2 flex-wrap属性
      3. 3.3 flex-flow
      4. 3.4 justify-content属性
      5. 3.5 align-items属性
      6. 3.6 align-content属性
      7. 四、项目的属性
      8. 4.1 order属性
      9. 4.2 flex-grow属性
      10. 4.3 flex-shrink属性
      11. 4.4 flex-basis属性
      12. 4.5 flex属性
      13. 4.6 align-self属性

html+css:display:flex属性相关推荐

  1. html block属性,css display block属性的意思、作用和效果

    css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...

  2. 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block

    文章目录 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...

  3. CSS display:table属性用法解析

    本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...

  4. css不换行属性_前端 | css display:flex 的六个属性你知道吗

    前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...

  5. css display:flex 弹性布局 子标签设置宽度无效的问题

    前言 最难的果然还是css,工作中经常使用display:flex; 让多个竖直排列的元素变成横向排列,直到今天才发现display:flex; 会导致子标签的宽度失效. 正文 问题 <div ...

  6. [CSS] CSS display:flex实现内容水平垂直居中展示

    display:flex实现内容水平垂直居中展示 需要增加下面两点就能实现 首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...

  7. css display: flex 横向滚动

    flex 实现横向滚动 .css-flex {display: flex;height: 1.5rem;overflow: scroll;white-space:nowrap; } .css-self ...

  8. display:flex属性 justify-content: space-between和flex-flow:wrap一起使用的问题

    .wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐,子元素之间有间隙*/flex-flow ...

  9. CSS display的属性

    可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...

最新文章

  1. 背包模型dp2之二维费用背包
  2. linux下Vi编辑器命令大全(上)
  3. Spring Boot中对自然语言处理工具包hanlp的调用详解
  4. numpy(8)-转换维度
  5. SpringOne 2017:与Pivotal聊大会、Spring、Reactor、WebFlux及其他
  6. sqoop 导入mysql blob字段,Sqoop导入的数据格式问题
  7. Scala 函数式编程_部分应用函数_Partially Applied Functions
  8. FreeRTOS任务通知
  9. java注解教程 pdf_Java注解详解
  10. sql 分组求和_《从零学会SQL-第七关高级功能》课后练习
  11. Java的JDK以及maven环境变量配置
  12. Android使用google breakpad之minidump_stackwalk
  13. C语言图形编程|设置位置
  14. 事业单位考试计算机专业知识题库,计算机考试题库:计算机考试练习题(29)...
  15. 长ping域名带时间戳
  16. 2016微信数据报告 大数据展示微信生活
  17. mysql的索引缺点_Sqlite数据库中索引的使用、索引的优缺点
  18. 四、《云原生 | Kubernetes篇》二进制安装部署k8s高可用集群V1.24
  19. 炫舞服务器显示方框怎么回事,win10界面全是显示方块如何解决_win10系统界面出现白色方框该怎么去除-win7之家...
  20. 光电池和光电二极管的区别

热门文章

  1. 持续集成以及工具git/gitee/jenkins介绍
  2. swift之TextField神魔禁止系列
  3. [iHOOYA]2023年1月28日作业解析
  4. 计算机网络在结构上可分为什么不同,计算机等级考试三级网络精选习题及详细解答(一)...
  5. 70后 80后 90后的20个经典差别!70后的站出来吧
  6. Ambassador系列-12-Prometheus Operator监控Ambassador Edge Stack
  7. 烤仔建工 | 友谊长存,2022新年派对中韩社区艺术交流展圆满落幕
  8. 找CALL入门写给对找call一片茫然的兄弟
  9. matlab 可能未使用callback,MATLAB 的 CALLBACK函数.
  10. 2021年未上市的行业独角兽