flex布局

.container{
   height:100%;
   width:100%;
   background:blue;
   display:flex;
   /*决定元素的排列方向
      display-direction:row  横向(默认)主轴是横向的
                       column纵向排列   主轴变为竖向
   */
   /*
    是否换行
    flex-wrap: wrap;放不下时自动换行
              nowrap不换行缩小各个比例(默认)
            wrap-reserve翻转(在交叉轴翻转,也就是在最上面会到最下面,不是左右是上下)
   */
   /*
    flex-flow是上面方向和换行的简写
    flex-flow:row wrap;
   */
   /*
    justify-content: center;在主轴上居中
                 flex-start从左边开始对齐(默认)
                 flex-end从右边对齐
                 space-around每一块占据的区域大小一样大
                 space-between两端对齐
   */
   /*
    align-items: center;在交叉轴上的居中
                flex-start。flex-end
                stretch当子元素没有设置高度,会自动占满交叉轴上的位置
                baseline对齐方式是一各个区域块内的文字来对齐
   */

    /*
    align-content: center;在主轴上居中
                 flex-start从左边开始对齐(默认)
                 flex-end从右边对齐
                 space-around每一块占据的区域大小一样大
                 space-between两端对齐
                 stretch
   */
}
.items{
  width:100rpx;
  height:100rpx;
  background:blanchedalmond;
  border:1px solid #000;

  /*
    flex各个属性写给子元素
      flex-grow:0(默认)
                1,2,3每一块占据的份数

      flex-shrink:1(默认)空间不足等比缩小
                  0无效果
      
      flex-basis:在微信上要写  **px;在主轴占据的空间

      flex:1 0 200px;是以上三个的简写

      order:1  给每一个写  可以改变位置1代表第一个

      align-self:flex-end;子元素自己定义自身的排列方式,不影响其他元素
                center;在交叉轴上的居中
                flex-start。flex-end
                stretch当子元素没有设置高度,会自动占满交叉轴上的位置
                baseline对齐方式是一各个区域块内的文字来对齐
  */
}
之前写小程序用到的弹性盒布局,在这里分享一下。

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...