分类目录归档:Bootstrap

CSS弹性盒子Flex:flex-grow、flex-shrink、flex-basis属性

flex-grow、flex-shrink、flex-basis三个属性的作用:

flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。

(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))

小编这里先教一下大家如何快速记住这三个属性:

首先是 flex-basis ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。

其次是 flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。见下面第二个属性的内容

最后是 flex-shrink, shrink英文意思是<收缩,>,这就代表当父元素的宽度小于子元素宽度之和时,并且超出了父元素的宽度,这时,flex-shrink就会说外面的世界太苦了,我还是回到父亲的怀抱中去吧!因此,flex-shrink就会按照一定的比例进行收缩。

HTML 中 “role” 属性的目的是什么?

 我一直在看某些人的工作中的角色属性。我也用它,但我不确定它的效果。

例如:

 <header id="header" role="banner">
     Header stuff in here
 </header>

要么:

 <section id="facebook" role="contentinfo">
     Facebook stuff in here
 </section>

要么:

 <section id="main" role="main">
      Main content stuff in here
 </section>

这个角色属性是否必要?

这个属性对于语义更好吗?

它改善了 SEO 吗?

可以在这里找到角色列表,但我看到有些人自己组成。是允许还是正确使用角色属性?

有什么想法吗?

html

答案

您看到的大多数角色都被定义为 ARIA 1.0 的一部分,然后被合并到 HTML5 中。一些新的 HTML5 元素(对话框,主要等)甚至基于原始的 ARIA 角色。

http://www.w3.org/TR/wai-aria/

除了本机语义元素之外,还有两个主要原因可以使用角色。

原因#1。覆盖没有适合宿主语言元素的角色,或者由于各种原因,使用了语义较少的元素。

在此示例中,使用了链接,即使生成的功能比导航链接更像按钮。

 <a href="#" role="button" aria-label="Delete item 1">Delete</a>

屏幕阅读器会将其视为按钮(而不是链接),您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis。

 *[role="button"] {
   /* style these a buttons w/o relying on a .button class */
 }

原因#2。备份本机元素的角色,以支持实现 ARIA 角色但尚未实现本机元素角色的浏览器。

例如,浏览器多年来一直支持 “main” 角色,但它是 HTML5 的一个相对新增的版本,因此很多浏览器还不支持<main>的语义。

 <main role="main">…</main>

这在技术上是多余的,但可以帮助一些用户并且不会伤害任何用户。几年后,这种技术可能变得不必要了。

你还写道:

我看到有些人自己组成。是允许还是正确使用角色属性?

这是属性的有效使用,除非未包含真实角色。浏览器将在令牌列表中应用第一个已识别的角色。

 <span role="foo link note bar">...</a>

在列表之外,只有linknote是有效角色,因此链接角色将被应用,因为它首先出现。如果您使用自定义角色,请确保它们与 ARIA 中的任何已定义角色或您正在使用的主机语言(HTML,SVG,MathML 等)不冲突。

据我了解,角色最初是由 XHTML 定义的,但已被弃用。但是,它们现在由 HTML 5 定义,请参见此处: https//www.w3.org/WAI/PF/aria/roles#abstract_roles_header

role 属性的目的是识别解析软件元素(及其子元素)作为 Web 应用程序一部分的确切功能。这主要是作为屏幕阅读器的可访问性事物,但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用,需要将属性设置为我链接的规范中的一个角色。如果你自己构成,那么这个 “未来” 功能就无法运作 – 评论会更好。

实用性: http//www.accessibleculture.org/articles/2011/04/html5-aria-2011/

这个角色属性是否必要?

答: 是的

  • 当语言未定义自己的角色属性时,角色属性对于支持可访问富 Internet 应用程序WAI-ARIA以在基于 XML 的语言中定义角色是必需的。

  • 虽然这是Protocols and Formats Working Group发布角色属性的原因,但该属性也有更多的一般用例。

它为您提供:

  • 无障碍

  • 设备适配

  • 服务器端处理

  • 复杂的数据描述,…… 等。

Bootstrap 4的新布局——弹性盒子

04 Bootstrap4的新布局——弹性盒子(flex)

4.1 定义弹性盒子(.d-flex|.d-inline-flex)

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素,被称为Flex容器,简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。

应用display工具创建一个flex box容器,并将直接子元素转换为flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。

在bootstrap 4中有两个类来创建弹性盒子,分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子;.d-inline-flex类设置对象为内联块级弹性伸缩盒子。

bootstrap 中定义的.d-flex和.d-inline-flex样式类:

 .d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
 }
 .d-inline-flex {
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 <body class="container">
 <h3 class="mb-4">定义弹性盒子</h3>
 <h4>d-flex</h4>
 <!--使用d-flex类创建弹性盒子-->
 <div class="d-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>d-inline-flex</h4>
 <!--使用d-inline-flex类创建弹性盒子-->
 <div class="d-inline-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-inline-flex item 1</div>
     <div class="p-2 bg-success">d-inline-flex item 2</div>
     <div class="p-2 bg-danger">d-inline-flex item 3</div>
 </div>
 </body>

提示:对于.d-flex和.d-inline-flex也存在响应变化,可根据不同的断点来设置。

 .d-{sm|md|lg|xl}-flex
 .d-{sm|md|lg|xl}-inline-flex

4.2 排列方向

4.2.1 水平方向排列(.flex-row)

对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <h4>flex-row(从左侧开始)</h4>
 <div class="d-flex flex-row p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>flex-row-reverse(从右侧开始)</h4>
 <div class="d-flex flex-row-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div>
 </body>

提示:水平方向布局还可以添加响应式的设置,响应式类如下。

 .flex-{sm|md|lg|xl}-row
 .flex-{sm|md|lg|xl}-row-reverse

4.2.2 垂直方向排列(.flex-column)

使用.flex-column设置垂直方向布局,或使用.flex-column-reverse实现垂直方向的反转布局(从底向上铺开)。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <h4>flex-column(从上往下)</h4>
 <div class="d-flex flex-column p-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div><br/>
 <h4>flex-column-reverse(从下往上)</h4>
 <div class="d-flex flex-column-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

提示:垂直方向布局也可以添加响应式的设置,响应式类如下。

 .flex-{sm|md|lg|xl}-column
 .flex-{sm|md|lg|xl}-column-reverse

4.3 内容排列( justify-content-*)

使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐(以x轴开始,如果是flex-direction: column,则以y轴开始),可选方向值包括:start(浏览器默认值)、end、center、between和around,说明如下:

† .justify-content-start:项目位于容器的开头。

† .justify-content-center:项目位于容器的中心。

† .justify-content-end:项目位于容器的结尾。

† .justify-content-between:项目位于各行之间留有空白的容器内。

† .justify-content-around:项目位于各行之前、之间、之后都留有空白的容器内。

 <body class="container">
 <h3 class="mb-4">内容排列</h3>
 <!--justify-content-start-->
 <div class="d-flex justify-content-start mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-center-->
 <div class="d-flex justify-content-center mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-end-->
 <div class="d-flex justify-content-end mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-between-->
 <div class="d-flex justify-content-between mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-around-->
 <div class="d-flex justify-content-around bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.4 项目对齐(align-items-*)

使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐(以y轴开始,如果选择flex-direction: column,则从x轴开始),可选值有: start、end、center、baseline和stretch (浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
         }
     </style>
 </head>
 <body class="container">
 <h3 class="mb-4">项目对齐</h3>
 <div class="d-flex align-items-start bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-end bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-center bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.5 自动对齐(align-self-*)

使用align-self-*通用样式,可以使Flexbox上的项目单独改变在横轴上的对齐方式(y值开始,如果是flex-direction:column则为x轴开始),其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
             }
  </style>
 </head>
 <body class="container">
 <h3 class="mb-4">指定项目对齐</h3>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-start">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-center">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-end">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-baseline">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-stretch">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.6 自动相等(.flex-fill)

在一系列子元素上使用.flex-fill类,来强制它们平分剩下的空间。

 <body class="container">
 <h3 class="mb-4">平均分配剩下的空间</h3>
 <div class="d-flex bg-warning text-white">
     <div class="flex-fill p-2 bg-primary ">Flex item1(包含大量内容)</div>
     <div class="flex-fill p-2 bg-success">Flex item 2</div>
     <div class="flex-fill p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.7 等宽变换(.flex-grow-*)

使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中,.flex-grow-1元素使用它可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。

 <body class="container">
 <h5>增长</h5>
 <div class="d-flex bg-warning text-white mb-4">
     <div class="p-2 flex-grow-1 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 <h5>收缩</h5>
 <div class="d-flex bg-warning text-white">
     <div class="p-2 w-100 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item2</div>
     <div class="p-2 w-100 bg-danger">Flex item3</div>
 </div>
 </body>

4.8 自动浮动(Auto margins)

4.8.1 水平方向浮动(.mr|.ml-auto)

以下是通过auto margin来控制flex项目的三种案例,分别是预设(无margin)、向右推两个项目(.mr-auto)、向左推两个项目(.ml-auto)。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="mr-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="ml-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.8.2 垂直方向浮动(margin-top|bottom:auto)

结合align-items、flex-direction:column、margin-top:auto或margin-bottom:auto,可以垂直移动一个Flex子容器到顶部或底部。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <div class="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;">
     <div class="mb-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="mt-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.9 弹性布局——包裹(.flex-wrap)

改变flex项目在flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。

 <body class="container">
 <h3 class="mb-4">包装</h3>
 <div class="d-flex bg-warning text-white mb-4  flex-wrap-reverse" >
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 <div class="d-flex bg-warning text-white mb-4 flex-wrap">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 </body>

4.10 排列顺序(order-*)

使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后,以及重置DOM顺序,由于order只能使用整数值(例如:5),因此对于任何额外值需要自定义CSS样式。

 <body class="container">
 <h3 class="mb-4">排列顺序</h3>
 <div class="d-flex bg-warning text-white">
     <div class="order-3 p-2 bg-primary">Flex项目1</div>
     <div class="order-2 p-2 bg-success">Flex项目2</div>
     <div class="order-1 p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.11 对齐内容(align-content)

使用flexbox容器上的align-content通用样式定义,可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。

 <h5>align-content-between</h5>
 <div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
     <div class="p-2 bg-primary">Flex项目7</div>
     <div class="p-2 bg-success">Flex项目8</div>
     <div class="p-2 bg-danger">Flex项目9</div>
     <div class="p-2 bg-primary">Flex项目10</div>
     <div class="p-2 bg-success">Flex项目11</div>
     <div class="p-2 bg-danger">Flex项目12</div>
 </div>