有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3弹性盒子常用属性

代码编程 cat 11个月前 (11-02) 44次浏览 已收录 0个评论 扫描二维码

设置为弹性盒

css3弹性盒子常用属性

display:flex; 块级弹性盒
display:inline-flex; 行级弹性盒 (相当于行级块)

flex-direction-作用:描述弹性盒主轴方向(项目的排列方向)

flex-direction: row; 横向【默认从左向右】 
flex-direction: row-reverse; (右对齐),从后往前排,最后一项排在最前面
flex-direction: column 纵向排列;(默认从上向下) 
flex-direction: column-reverse; 与column反向
<!-- 
     1.设置为弹性盒之后,项目按主轴方向排列(默认从左向右)
     2.弹性盒项目本身大小为自动时,默认横向内容撑开,纵向默认拉伸占满容器
-->

flex-direction-作用:

justify-content: flex-start; 起始点对齐——默认值。
justify-content: flex-end; 终点对齐——弹性项目向行尾紧挨着填充。
justify-content: center; 居中对齐
justify-content: space-between; 容器的剩余空间在项目之间
justify-content: space-around; 项目两侧拥有相等的剩余空间,项目之间是项目与容器之间的2倍
justify-content: space-evenly; 项目与容器,项目与项目之间拥有相等的空间

align-items-设置侧轴方向的对齐方式:

align-items: flex-start; 侧轴起始位置对齐 
align-items: flex-end; 侧轴末端位置对齐 
align-items: center; 侧轴居中对齐 
align-items: baseline; 基线对齐 
align-items: stretch; 拉伸占满侧轴——指定项目在侧轴方向的大小为'auto'时有效 默认值

flflex-wrap-指定弹性盒子的子元素换行方式:

flex-wrap:
        nowrap -不换【默认值】
        wrap  换行(起始点在上)
        wrap-reverse  与 wrap反向 (起始点在下)

align-content-多根轴线的对齐方式:

align-content: stretch;  默认  水平方向
align-content: flex-start;  左对齐
align-content: flex-end;  右对齐
align-content: center;   居中对齐
align-content: space-between;  两端对齐
align-content: space-around;  容器剩余空间在行与行两侧,行与行之间是行与容器之间的两倍
align-content: space-evenly;  行与行之间,行与项目之间容器的剩余空间均等分布

弹性盒项目属性:

/* 默认值为0,值越大排列越靠后 */  order:1;

align-self 属性-设置项目自身在侧轴上的对齐方式:

align-self:  单个项目在侧轴上的对齐方式
align-self:  控制所有项目在侧轴上的对齐方式
align-self:  auto;  自动——为元素的父元素的'align-items'值,
align-self:  flex-start;  起始位置对齐
align-self:  flex-end;  终点位置对齐
align-self:  center;  居中对齐
align-self:  baseline;  基线对齐。
align-self:  stretch;  拉伸占满侧轴——侧轴大小为auto时有效

flex-简写:

作用:用于指定弹性子元素如何分配空间。
flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

flex-grow-作用增长比率:

默认值0  表示即使容器有剩余空间也不增长
数值,表示份数

flex-basis-基准值(参与计算的最终值):

    <!-- 
                 没有定义基准值,以当前元素宽度、高度为准
                 如果定义了基准值,以基准值为准(flex-basis的优先)

                 计算项目的最终大小

                        计算剩余空间
                        计算增长以后的值
                        计算收缩以后值

     -->

    <!-- 
            计算剩余空间
                    400-50-100-100 = 150

                    1份的大小:150/5 = 30  

            计算增长以后的大小:
                    50 + 30  = 80
                    100 + 30 *2 =  160
     -->
    <!-- 

        剩余空间
            400-100-100-100 =  100

            100/5=20

     -->

    <!-- 
        flex-grow:
            默认值0  表示即使容器有剩余空间也不增长

            数值,表示份数
       
     -->

flex-shrink-定义项目的收缩比率:

    <!-- 

        flex-shrink:
                 收缩比率

                 容器空间不足时,才有效

                    默认值:1  表示当容器空间不足时收缩
                           0 表示不收缩
          
     -->
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址