h5c3-day04 (弹性盒子)

码陨之间

已于 2023-08-24 20:00:48 修改

阅读量54

点赞数

文章标签：前端

于 2023-08-24 19:53:55 首次发布

本文链接：https://blog.csdn.net/ZXK19990928/article/details/132481558

版权

<!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>
      /* 把父元素设置为 弹性盒模型 */
      /* display: flex; */

      /* 项目（子元素们）会默认按照主轴排列 */
      /* flex-direction: 
              row 默认值        主轴正常排列
              row-reverse       主轴颠倒排列 
              column            副轴排列 
              column-reverse    副轴颠倒排列; 
            */
      /* flex-wrap: nowrap（默认）单行 | wrap 换行 | wrap-reverse;多行从下向上换行 */
      /* flex-flow: <flex-direction> || <flex-wrap>;  简写 */
      /* 主轴上面的对齐方式 */
      /* justify-content: 
            flex-start(默认值)  正常主轴排列 
            flex-end            主轴末尾对齐 
            center              主轴居中对齐 
            space-between       主轴两端对齐 
            space-around        元素之间的间距一致 左右两边的间距加起来=元素之间的间距; */

      /* 副轴上面的对齐方式 */
      /* align-items:flex-start | flex-end | center | baseline | stretch;  */
      /* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
      /* align-content: 
            stretch(默认)   默认排列方式
            flex-start      开始对齐
            flex-end        末尾对齐 
            center          居中对齐 
            space-between   两端对齐 
            space-around    元素之间的间隙一致*/

      /* order规定子元素 （项目）的排列顺序 */
      /* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
      /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
      /* 如果每一个项目没有宽度  那么 flex-grow: 1; 就代表平均分配宽度 */
      /* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，越缩小 */
      /* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 */
      /* flex-basis 跟width一样 */
      /* 简写 */
      /* flex: 0 1 auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  */
      /* align-self: auto | flex-start | flex-end | center | baseline| stretch;  */
      /* align-self属性允许单个项目有与其他项目不一样的对齐方式 */

      
    </style>
  </head>

  <body></body>
</html>