当前位置:首页 > 移动端开发

flex常用网页布局实例

小强的家   发布时间:2019-04-21   
 

1.居中对齐

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
  1. 通过设置父类容器的css代码控制子元素的排列方式(flex-direction:row)从左到右(默认方式)。
  2. 子元素超出内容时是否换行。flex-wrap:wrap(采用换行的方式)。
  3. 合起来就是flex-flow:row wrap
  4. 设置子元素的弹性盒堆叠伸缩行的对齐方式为在盒子中平局分布 justify-content:space-around

演示:flexbox3

2.自适应导航

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    flex-direction: column;
  }
}
  1. 设置子元素为从左到右(flex-direction:row),内容超出换行(flex-wrap:wrap).
  2. 设置子元素的内容向右对齐(justify-content:flex-end)
  3. 当小于800px时,内容为居中,当小于500px时,内容纵向排列,从上到下。

演示:flexbox4·

3.常见3栏移动优先布局


.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* Medium screens */
@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
  1. 设置子元素从左到右,超出换行(flex-flow:row wrap;)。
  2. 默认情况下所有子元素拓展比例为1(flex-grow:1),伸缩比例为100%(flex-basis:100%)。
  3. 大于800px时,.main的拓展比例为2.伸缩值为0(flex-basis:0px),并且侧栏aside-1排列在第一位,main在第二位,aside-2在第三位。
  4. 大于600时。.aside元素的拓展比例为1(flex-grow:1),伸缩比例为auto(flex-basis:auto)。
演示:flexbox5
原文链接:http://caibaojian.com/flexbox-guide.html
 


相关文章:

flex常用网页布局实例评论(共有 0 条评论)

我要点评flex常用网页布局实例
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】