Home >Web Front-end >CSS Tutorial >Detailed explanation of css3 flex layout examples

Detailed explanation of css3 flex layout examples

零下一度
零下一度Original
2017-06-17 14:36:471716browse

flex Layout is the most frequently used and outstanding function in css3. It is a bit complicated. It is divided into attributes applied to the container and attributes on the project, that is, on the parent element. of and attributes on child elements.

Attributes on the parent element

  • display: flex

    <style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body>  <p>      <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b>  </p></body>

    When the parent element is set to flex After, its parent element itself will appear as a block-level element. If you want to appear as an inline element, you can use inline-flex. All child elements, whether block-level or inline, will immediately become inline layout. This is due to the default values ​​of other attributes and can be modified later.

  • ##flex-

    direction

    <style>p{display: flex; background-color: yellow; margin: 5px;}p.row{ flex-direction: row;}p.row-reverse{ flex-direction: row-reverse;}p.column{ flex-direction: column;}p.column-reverse{ flex-direction: column-reverse;}b{background-color: red;}</style><body>  <p class="row">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="row-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="column">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="column-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p></body>

    flex-direction Decision Arrangement direction of child elements, default value row.

  • ##flex-wrap
  • <style>p{display: flex; background-color: yellow; margin: 5px; }p.nowrap{ flex-wrap: nowrap;}p.wrap{ flex-wrap: wrap;}p.wrap-reverse{ flex-wrap: wrap-reverse;}b{background-color: red; width: 100px;}</style><body>  <p class="nowrap">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="wrap">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="wrap-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p></body>

    flex-wrap

    Determines how the child element should be handled when it exceeds one line. The default value nowrap will compress the width of child elements, wrap will wrap a new line, and wrap-reverse will add a new line upwards. Note: This is discussed under the premise that the main axis is the X-axis.

    ##justify-content
  • <style>b{background-color: red; }p{display: flex; background-color: yellow; margin: 5px; }p.start{ justify-content: flex-start;}p.end{justify-content: flex-end;}p.center{ justify-content: center;}p.space-between{ justify-content: space-between;}p.space-around{ justify-content: space-around;}</style><body>  <p class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="space-between">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="space-around">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p></body>
  • justify-content

    Determines whether the child element is on the main axis (currently the X axis ), the default value is

    flex-start. The distance between space-between and space-around is divided equally by the excess space, but the latter will also count the space for the left and right ends.

    ##align-items

    <style>b{background-color: red; width: 40px;}b:nth-child(1){}b:nth-child(2){font-size: 30px; height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }p.start{ align-items: flex-start;}p.end{ align-items: flex-end;}p.center{ align-items: center;}p.baseline{ align-items: baseline;}p.stretch{ align-items: stretch;}</style><body>  <p class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="baseline">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="stretch">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p></body>
  • align-items

    Determine the secondary axis (currently the Y axis) The alignment of elements. The default value

    stretch

    means that when the child element does not set a height, it will fill the height of the parent class.

    align-content

    <style>b{background-color: red; width: 100px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}p.start{ align-content: flex-start;}p.end{ align-content: flex-end;}p.center{ align-content: center;}p.space-between{ align-content: space-between;}p.space-around{ align-content: space-around;}p.stretch{ align-content: stretch;}</style><body>  <p class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="space-between">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="space-around">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p>  <p class="stretch">      <b>a</b><b>b</b><b>c</b><b>d</b>  </p></body>
  • align-content

    indicates that when the child element has multiple lines, each line Position on the secondary axis (currently the Y axis). The default value

    stretch

    means changing the height of each row of child elements until the parent element is filled.

    Attributes on child elements

order

<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{order: -1;}</style><body>  <p class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </p></body>
  • order

    means arranging elements of the same level from small to large, the default value is

    0

    .

    ##flex-grow

    <style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body>  <p class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </p></body>

  • flex-grow
  • means when the main axis (currently the X axis) is on When there is remaining space, the proportion occupied by dividing the space equally. The default value is

    0

    , which means it does not occupy space. The current space bisection ratio is

    0 : 0 : 1 : 0, so c occupies all remaining space.

    ##flex-shrink

    <style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; width: 100px; flex-shrink: 0;}b.test{flex-shrink: 1; background-color: green;}</style><body>  <p class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </p></body>

    flex-shrink
  • means when the main axis (currently the X axis) space When it is not enough to fill all the sub-elements, how should the sub-elements be compressed? The default value is
  • 1

    , which means

    1 : 1 : 1 : 1

    , that is, equal-ratio compression. The current ratio is 0: 0: 1: 0, indicating that all space is compressed by c. ##flex-basis

    <style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b.test{flex-basis: 100px; background-color: green;}</style><body>  <p class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </p></body>

    flex-basis

    means when the main axis (currently the X axis) is on The position occupied before dividing the space equally. When the main axis is the X-axis, it is equivalent to setting
  • width
  • . When the main axis is the Y-axis, it is equivalent to setting

    height

    . The default value

    auto means equal to width or height. ##align-self

    <style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body>  <p class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </p></body>

    align-self 表示当前元素可以覆盖父元素 align-items 所决定的副轴(当前为Y轴)上的方向。默认 auto,即不设置。可选择与 align-items 一致,auto | flex-start | flex-end | center | baseline | stretch 。


特别注意,为简化布局理解,上面事例都使用了默认的 flex-direction:row 作为子元素排序方向为基础。如果改为 flex-direction:column ,主轴将为变成 Y 轴,而副轴将变成 X 轴,所有属性的效果将会改变,这个留给读者自行实践。


学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!

The above is the detailed content of Detailed explanation of css3 flex layout examples. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn