弹性布局

Posted 2020-12-11 ikai

/* pages/flex/flex.wxss */
.outter{
  width: 100%;
  display: flex;
  /* justify-content: flex-start; 左对齐 */
  /* justify-content: flex-end; 右对齐 */
  /* justify-content: center; 居中对齐 */
  /* justify-content: space-around; 延主轴均匀分布 元素中间的距离是最前后或者最后一个元素到父元素的间距的两倍 */
  /* justify-content: space-between; 两端对齐 */
  /* justify-content: space-evenly; 延主轴均匀分布 */
  justify-content: center;
  /* align-items: flex-start; 起始端对齐 */
  /* align-items: flex-end; 尾端对齐 */
  /* align-items: center; 居中对齐 */
  /* align-items: stretch; 如果元素没有高度，那么将元素的高拉伸为100% */
  /* align-items: baseline; 按照文字高度对齐 */
  align-items: stretch;
  /* flex-direction: row; 主轴和侧轴的方向 主轴从左到右 侧轴上下 */
  /* flex-direction: row-reverse; 主轴从右到左 侧轴上下 */
  /* flex-direction: column  主轴上下 侧轴左右*/
  /* flex-direction: column-reverse 主轴下上 侧轴左右 */
  /* flex-wrap: wrap; 换行*/
  /* flex-wrap: nowrap 不换行*/
  /* flex-wrap: wrap-reverse 将上一面放到最下面 */
  /* align-content: stretch 默认将元素高度拉伸填满，如果多行那么就平均 */
  /* align-content: flex-start 换行之后元素的上边距为0 */
  /* align-content: flex-end 换行之后元素的下边距为 0  */
  /* align-content: center 垂直方向居中对齐 */
  /* align-content: space-between; 上下对齐 */
  /* align-content: space-around; 元素间距为元素和边界间距的两倍 */



  background-color: pink;
  height: 300px;
}
.inner{
  /* flex-basis: auto; 元素占据的面积 默认值自动 */
  /* flex-basis: 200px; 设置子元素占据的宽度和高度 */
  /* flex-grow: 1 设置元素是否增大 默认是0不增大 1是 如果都放大，那么元素将按照比例平均划分，如果不相等那么按照比例划分 越大的占据面积越大 */
  /* flex-shrink: 1 默认是1缩小 元素是否缩小 和flex-grow 相反 */
  width: 80px;
  height: 80px;
  background-color: #ccc;
  border: 1px solid red;
  box-sizing: border-box
}
.inner4{
  width: 80px;
  background-color: #ccc;
  border: 1px solid red;
  box-sizing: border-box
}