css基础19

最新推荐文章于 2024-05-18 06:08:21 发布

止语c

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量69

点赞数

分类专栏： HTML和CSS学习之路文章标签： css

本文链接：https://blog.csdn.net/weixin_53333752/article/details/128495891

版权

HTML和CSS学习之路专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 缩放
    scaleX()水平方向缩放
    scaleY()垂直方向放大
    scale()双方向放大 
    transform：scale()-->
    <!-- 
    弹性盒子flex
        flex-direction指定弹性元素的排列方式
        row默认值，从左向右排列
        row-reverse从右向左排列
        column从上向下排列
        row-column从下向上排列
            主轴：弹性元素的排列方向
            侧轴：与主轴垂直的方向
    弹性元素的特性
        flex-grow指定弹性元素的伸展的系数
            当元素有多余空间时，剩余空间会按比列分配
        flex-shink指定弹性元素的收缩的系数
        当元素空间不够时，元素会按比例收缩
        flex-wrap:设置弹性元素在弹性容器中是否自动换行
            可选值：
                nowrap默认值，元素不会自动换行
                wrap元素沿着副轴方向自动换行
                wrap-reverse沿着副轴反方向换行
        flex-flow可同时设置wrap和direction的值
        justify-content设置如何分配主轴上的空白空间
            flex-start沿主轴起边排列
            flex-end沿主轴终边排列
            center居中排列
            space-around空白分布在元素两侧
            space-between空白均匀分布在元素中间
            space-evenly空白分布在元素单侧
        align-item设置元素在副轴上如何对齐
            可选值:
            stretch默认值，将元素的长度设置为相同的值
            flex-start元素不会拉伸，沿着副轴起边对齐
            flex-end沿着副轴终边对齐
            center居中对齐
            baseline基线对齐
        align-content副轴空白空间的分布
            和justify-content类似
        flex-basis设置元素在株洲上的基础长度
        默认值auto表示参考元素自身的宽度和高度
        flex可以设置弹性元素的生长系数，收缩系数和flex-basis
        order决定元素的排列顺序
     -->
  </body>
</html>