微信小程序学习之flex布局实例篇,实例比较

CSS Grid VS Flexbox:实例相比较

2017/04/21 · CSS ·
Flexbox,
Grid

初稿出处: Danny
Markov   译文出处:IT程序狮   

亚洲必赢官网 1

  • DEMO
    地址
    :【传送门】
  • 以身作则下载地址
    【传送门】

尽快原先,全数 HTML 页面包车型客车布局还都是因此 tables、floats 以及任何的 CSS
属性来完毕的。面对复杂页面的布局,却未曾很好的不二法门。

然而Flexbox的现身,便轻松的化解了复杂的
Web
布局。它是一种专注于创建平安的响应式页面包车型大巴布局方式,并得以轻松地正确对齐成分及其内容。方今已是大多数Web 开发职员首要采取的 CSS 布局方式。

明日,又并发了四个营造 HTML
最佳布局系列的新竞争者。(亚军头衔正在征战中…)它正是兵不血刃的CSS
Grid布局。直到本月月中,它也将在Firefox
52和Chrome
57亚洲必赢官网 ,上获取原生支持,相信不久也会获得任何浏览器包容性的支撑。

何以使用 Flexbox 和 CSS Grid,完结神速布局

2017/09/21 · CSS ·
Flexbox

原稿出处:
葡萄城控件   

CSS
浮动属性一向是网站上排列成分的首要措施之一,不过当落到实处复杂布局时,那种方法不总是那么精良。幸运的是,在现代网页设计时期,使用
Flexbox 和 CSS Grid 来对齐成分,变得相对简单起来。

行使 Flexbox 能够使成分对齐变得简单,因而 Flexbox 已经被广泛应用了。

同时,CSS Grid 布局也为网页设计行业推动了相当大的惠及。固然 CSS Grid
布局未被广泛使用,可是浏览器逐步开端扩张对 CSS Grid 布局的支撑。

 

尽管 Flexbox 和 CSS Grid
能够做到接近的布局,但是这次,我们学习的是怎样结合使用那五个工具,而不是只选用中间的3个。在不久的后天,当
CSS Grid 布局获得完全的浏览器支持时,设计职员就能够使用每种 CSS
组合的优势,来成立最得力和最有意思的布局规划。

 

上一篇小说介绍了Flex布局的语法,今日牵线常见布局的Flex写法。
您会看出,不管是哪些布局,Flex往往都足以几行命令消除。

CSS
浮动属性一向是网站上排列元素的根本措施之一,然而当落到实处复杂布局时,那种措施不总是那么完美。幸运的是,在现代网页设计时期,使用
Flexbox 和 CSS Grid 来对齐成分,变得相对不难起来。

中央布局测试

要打听那三个连串构建布局的措施,我们将通过同样的 HTML
页面,利用不一致的布局格局 (即 Flexbox 与 CSS Grid)为我们区分。

而且,你也得以透过小说顶部附近的下载按钮,下载演示项目展开自己检查自纠,大概经过在线演示来观望它们:

亚洲必赢官网 2

简版静态页面布局

该页面包车型客车宏图相对相比较不难 –
它是由一个居中的容器组成,在其内部则带有了标头、主要内容部分、侧边栏和页脚。接下来,我们要形成而且保持
CSS 和 HTML 尽或许整洁的挑衅事项:

  1. 在布局上将多少个首要的局地开始展览固化。
  2. 将页面变为响应式页面;
  3. 对齐标头:导航朝左对齐,按钮向右对齐。

如您所见,为了有利于相比,大家将有所事项精简处理。那么,让大家从第四个挑战事项发轫吧!

测试 Flexbox 和 CSS Grid 的着力布局

咱俩从3个非常的粗略且熟习的布局项目起先,包涵标题,侧边栏,首要内容和页脚等片段。通过这样1个不难的布局,来提携大家十分的快找到各类因素的布局方法。

下边是必要创造的内容:

亚洲必赢官网 3

要做到这几个主题布局, Flexbox 必要实现的第2职责包涵以下地方:

  • 创设完整宽度的 header 和 footer
  • 将侧边栏放置在主内容区域左边
  • 保证侧边栏和主内容区域的大大小小适当
  • 担保导航成分定位准确

 

亚洲必赢官网 4

 

挑战 1:定位页面部分

Flexbox 消除方案

咱俩将从 Flexbox 消除方案早先。大家将为容器添加display: flex来钦赐为
Flex 布局,并内定子成分的垂直方向。

.container { display: flex; flex-direction: column; }

1
2
3
4
.container {
    display: flex;
    flex-direction: column;
}

未来大家需求使重点内容部分和侧面栏相互相邻。由于 Flex
容器平日是单向的,所以大家要求丰裕一个打包器成分。

XHTML

<header></header> <div
class=”main-and-sidebar-wrapper”> <section
class=”main”></section> <aside
class=”sidebar”></aside> </div>
<footer></footer>

1
2
3
4
5
6
<header></header>
<div class="main-and-sidebar-wrapper">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer></footer>

下一场,大家给包装器在反向添加display: flexflex-direction属性。

.main-and-sidebar-wrapper { display: flex; flex-direction: row; }

1
2
3
4
.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}

终极一步,我们将设置主要内容部分与侧边栏的分寸。通过 Flex
完结后,主要内容部分会比侧边栏大三倍。

.main { flex: 3; margin-right: 60px; } .sidebar { flex: 1; }

1
2
3
4
5
6
7
.main {
    flex: 3;
    margin-right: 60px;
}
.sidebar {
   flex: 1;
}

如您所见,Flex 将其很好的贯彻了出来,然而仍急需一定多的 CSS
属性,并凭借了额外的 HTML 成分。那么,让大家看看 CSS Grid 如何兑现的。

CSS Grid 化解方案

本着本项目,有三种差其他 CSS Grid
消除措施,然而大家将采用网格模板区域语法来兑现,因为它犹如最契合大家要做到的工作。

第②,我们将定义多少个网格区域,全数的页面各2个:

XHTML

<header></header> <!– Notice there isn’t a wrapper this
time –> <section class=”main”></section> <aside
class=”sidebar”></aside> <footer></footer>

1
2
3
4
5
<header></header>
<!– Notice there isn’t a wrapper this time –>
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>

header { grid-area: header; } .main { grid-area: main; } .sidebar {
grid-area: sidebar; } footer { grid-area: footer; }

1
2
3
4
5
6
7
8
9
10
11
12
header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

下一场,大家会设置网格并分配每个区域的职位。初次接触 Grid
布局的情人,只怕感觉以下的代码会有点复杂,但当你询问了网格种类,就很简单明白了。

.container { display: grid; /* Define the size and number of columns in
our grid. The fr unit works similar to flex: fr columns will share the
free space in the row in proportion to their value. We will have 2
columns – the first will be 3x the size of the second. */
grid-template-columns: 3fr 1fr; /* Assign the grid areas we did earlier
to specific places on the grid. First row is all header. Second row is
shared between main and sidebar. Last row is all footer. */
grid-template-areas: “header header” “main sidebar” “footer footer”; /*
The gutters between each grid cell will be 60 pixels. */ grid-gap:
60px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    display: grid;
 
    /*     Define the size and number of columns in our grid.
    The fr unit works similar to flex:
    fr columns will share the free space in the row in proportion to their value.
    We will have 2 columns – the first will be 3x the size of the second.  */
    grid-template-columns: 3fr 1fr;
 
    /*     Assign the grid areas we did earlier to specific places on the grid.
        First row is all header.
        Second row is shared between main and sidebar.
        Last row is all footer.  */
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
 
    /*  The gutters between each grid cell will be 60 pixels. */
    grid-gap: 60px;
}

即是如此! 我们明天将服从上述组织举办布局,甚至不供给我们处理其他的
margins 或 paddings 。

基本 HTML 结构

<div class=”container”>     <header>         <nav>
          <ul>             <li></li>            
<li></li>             <li></li>          
</ul>         </nav>         <button></button>
    </header>     <div class=”wrapper”>         <aside
class=”sidebar”>             <h3></h3>        
</aside>         <section class=”main”>            
<h2></h2>             <p></p>        
</section>     </div><!– /wrapper –>    
<footer>         <h3></h3>         <p></p>
    </footer> </div><! — /container –>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!– /wrapper –>
    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div><! — /container –>

本人只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。小编的首要性参考资料是Landon
Schropp的文章和Solved
by
Flexbox。
壹 、骰子的布局
骰子的一面,最多能够停放七个点。

利用
Flexbox 能够使成分对齐变得不难,因此 Flexbox 已经被普遍利用了。

挑衅 2:将页面变为响应式页面

Flexbox 消除方案

这一步的进行与上一步密切相关。对于 Flexbox
化解方案,大家将改变包装器的flex-direction品质,并调动部分 margins。

@media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction:
column; } .main { margin-right: 0; margin-bottom: 60px; } }

1
2
3
4
5
6
7
8
9
10
@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }
 
    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

鉴于网页相比较简单,所以大家在传播媒介询问上不须求太多的重写。可是,假诺遇上更为复杂的布局,那么将会另行的定义卓殊多的内容。

CSS Grid 消除方案

鉴于大家曾经定义了网格区域,所以大家只必要在传播媒介询问中重新排序它们。
我们得以运用同一的列设置。

@media (max-width: 600px) { .container { /* Realign the grid areas for
a mobile layout. */ grid-template-areas: “header header” “main main”
“sidebar sidebar” “footer footer”; } }

1
2
3
4
5
6
7
8
9
10
@media (max-width: 600px) {
    .container {
    /*  Realign the grid areas for a mobile layout. */
        grid-template-areas:
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

要么,大家得以从头起首重新定义整个布局。

微信小程序学习之flex布局实例篇,实例比较。@media (max-width: 600px) { .container { /* Redefine the grid into a
single column layout. */ grid-template-columns: 1fr;
grid-template-areas: “header” “main” “sidebar” “footer”; } }

1
2
3
4
5
6
7
8
9
10
11
@media (max-width: 600px) {
    .container {
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

应用 Flexbox 创造布局

亚洲必赢官网 5

与此同时,CSS
Grid 布局也为网页设计行业带动了一点都不小的方便。纵然 CSS Grid
布局未被广泛使用,可是浏览器逐步开头扩大对 CSS Grid 布局的帮忙。

挑战 3:对齐标头组件

Flexbox 消除方案

咱俩的标头包括了导航和二个按钮的连带链接。大家愿意导航朝左对齐,按钮向右对齐。而导航中的链接务必正确对齐,且互相相邻。

XHTML

<header> <nav> <li><a
href=”#”><h1>Logo</h1></a></li>
<li><a href=”#”>Link</a></li> <li><a
href=”#”>Link</a></li> </nav>
<button>Button</button> </header>

1
2
3
4
5
6
7
8
<header>
    <nav>
        <li><a href="#"><h1>Logo</h1></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </nav>
    <button>Button</button>
</header>

大家曾在一篇较早的篇章中动用 Flexbox
做了看似的布局:响应式标头最简便的制作方法。那几个技能很简单:

header { display: flex; justify-content: space-between; }

1
2
3
4
header {
    display: flex;
    justify-content: space-between;
}

当今导航列表和按钮已正确对齐。下来大家将使“

`内的 items
进行水平移动。这里最简单的方法就是使用
display:inline-block`属性,但近期我们要求运用2个Flexbox 化解方案:

header nav { display: flex; align-items: baseline; }

1
2
3
4
header nav {
    display: flex;
    align-items: baseline;
}

仅两行代码就消除了! 还不易啊。接下来让我们看看哪些使用 CSS Grid
消除它。

CSS Grid 消除方案

为了拆分导航和按钮,大家要为标头定义display: grid天性,并设置二个 2
列的网格。同时,我们还索要两行额外的 CSS
代码,将它们固定在对应的边际上。

header{ display: grid; grid-template-columns: 1fr 1fr; } header nav {
justify-self: start; } header button { justify-self: end; }

1
2
3
4
5
6
7
8
9
10
header{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header nav {
    justify-self: start;
}
header button {
    justify-self: end;
}

至于导航中的内链 – 那是大家利用 CSS grid 最好的布局体现:

亚洲必赢官网 6

就算链接为内链方式,但它们不能科学的对齐。由于 CSS grid
不抱有基线选项(不像 Flexbox
具备的align-items属性),所以大家不得不再定义二个子网格。

header nav { display: grid; grid-template-columns: auto 1fr 1fr;
align-items: end; }

1
2
3
4
5
header nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
}

CSS grid
在此步骤中,存在部分综上说述的布局上的短处。但你也不用过于惊讶。因为它的靶子是对齐容器,而不是里面包车型地铁内容。所以,用它来处理终结工作,恐怕不是很好的取舍啊。

– Header 样式

我们从外到内,逐层初始筹划,首先将 display: flex; 添加到
container,那也是兼备 Flexbox 布局的首先步。接着,将 flex-direction
设置为 column,确认保证全部片段相互相对。

.container { display: flex; flex-direction: column; }

1
2
3
4
.container {
    display: flex;
    flex-direction: column;
}

通过 display: flex; 自动创设一个全宽的 header(header
默许情形下是块级成分)。通过那么些宣称,导航成分的放置会变得很简单。

导航栏的左侧有一个 logo 和三个菜单项,右边有多个签到按钮。导航位于
header 中,通过 justify-content: space-between;
能够兑现导航和按钮之间的电动间隔。

在导航中,使用 align-items: baseline;
能够落实全体导航项目与公事基线的对齐,那样也使得导航栏看起来越发统一。

亚洲必赢官网 7

代码如下:

header{ padding: 15px; margin-bottom: 40px; display: flex;
justify-content: space-between; } header nav ul { display: flex;
align-items: baseline; list-style-type: none; }

1
2
3
4
5
6
7
8
9
10
11
12
header{
    padding: 15px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}
 
header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

下边,就来探视Flex怎么样促成,从三个点到八个点的布局。你能够到codepen查看Demo。

 

结论

如果你已经浏览完整篇作品,那么结论不会让您感觉奇怪。事实上,并不存在最好的布局格局。Flexbox
和 CSS grid
是两种不一致的布局情势,大家相应依据现实的情景将它们搭配使用,而不是相互替代。

对此那多少个跳过文章只想看结论的情人(不用操心,我们也如此做),那里是由此实例相比后的下结论:

  1. CSS grids
    适用于布局大画面。它们使页面包车型地铁布局变得相当简单,甚至能够拍卖部分语无伦次和非对称的安顿。
  2. Flexbox 格外适合对齐成分内的始末。你能够使用 Flex
    来恒定布署上有个别较小的底细。
  3. 2D 布局适合利用 CSS grids(行与列)。
  4. Flexbox 适用于单一维度的布局(行或列)。
  5. 协助实行学习并应用它们。

多谢您的阅读。若你持有收获,欢迎点赞与分享。

1 赞 3 收藏
评论

亚洲必赢官网 8

– 页面内容样式

接下去,将侧边栏和主内容区域选取3个 wrapper 包罗起来。具有 .wrapper
类的 div,也亟需安装 display: flex; 不过 flex
方向与上述分裂。这是因为侧边栏和主内容区域竞相相邻而不是堆叠。

.wrapper { display: flex; flex-direction: row; }

1
2
3
4
.wrapper {
    display: flex;
    flex-direction: row;
}

亚洲必赢官网 9

主内容区域和侧边栏的轻重设置尤其关键,因为根本的新闻都在此间展现。主内容区域应该是侧面栏大小的三倍,使用
Flexbox 很简单实现那一点。

.main { flex: 3; margin-right: 60px; } .sidebar { flex: 1; }

1
2
3
4
5
6
7
8
.main {
    flex: 3;
    margin-right: 60px;
}
 
.sidebar {
   flex: 1;
}

看来,Flexbox
在开立那些不难的布局时,12分便捷。尤其在决定列表成分样式和设置导航与按钮之间的距离方面,尤其有用。

 

亚洲必赢官网 10

固然Flexbox 和 CSS Grid
能够做到接近的布局,可是此次,我们学习的是怎么构成使用那四个工具,而不是只选拔之中的二个。在不久的未来,当
CSS Grid 布局获得完整的浏览器协助时,设计人士就能够使用各种 CSS
组合的优势,来创制最实惠和最有意思的布局规划。

动用 CSS Grid 创造布局

为了测试成效,接下去使用 CSS Grid 创立相同的骨干布局。

亚洲必赢官网 11

只要不加表达,本节的HTML模板一律如下。
<div class=”box”> <span
class=”item”></span></div>

 

– Grid 模板区域

CSS Grid
的便利之处在于,能够钦定模板区域,那也使得定义布局变得12分直观。采用那种艺术,网格上的区域能够命名并引述地方项。对于那些基本布局,咱们须要命名多个品种:

  • header
  • main content
  • sidebar
  • footer

基本 HTML 结构

<div class=”container”>     <header>         <nav>
          <ul>             <li></li>            
<li></li>             <li></li>          
</ul>         </nav>         <button></button>
    </header>         <aside class=”sidebar”>        
<h3></h3>         <ul>            
<li></li>             <li></li>         
<li></li>          <li></li>         
<li></li>         </ul>     </aside>      
<section class=”main”>         <h2></h2>        
<p></p>         <p> </p>     </section>  
    <footer>         <h3></h3>        
<p></p>     </footer> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
   
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
            <li></li>
         <li></li>
         <li></li>
         <li></li>
        </ul>
    </aside>
 
    <section class="main">
        <h2></h2>
        <p></p>
        <p> </p>
    </section>
 
    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div>

笔者们遵照顺序在 grid container 中定义这几个区域,就像绘制它们等同。

grid-template-areas:

“header header”

“sidebar main”

“footer footer”;

现阶段侧边栏位于左侧,主区域内容位于右边,假如急需,也可以轻松转移顺序。

有一件事要留心:这一个名字需求“连接”到样式上。所以须要在 header block
中,添加 grid-area: header;。

header{ grid-area: header; padding: 20px 0; display: grid;
grid-template-columns: 1fr 1fr; }

1
2
3
4
5
6
header{
    grid-area: header;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

HTML 结构与 Flexbox 示例中的相同,但 CSS 与创设网格布局完全差异。

.container{ max-width: 900px; background-color: #fff; margin: 0 auto;
padding: 0 60px; display: grid; grid-template-columns: 1fr 3fr;
grid-template-areas: “header header” “sidebar main” “footer footer”;
grid-gap: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-gap: 50px;
}

动用 CSS Grid 布局时,在 container 中安装 display: grid;
格外关键。此处声明 grid-template-columns,是为着确认保证页面包车型大巴完全结构。那里
grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr
是网格的分数单位。

亚洲必赢官网 12

接下去,须求调整 header 容器中的 fr 单元。将 grid-template-columns
设置为 1fr 和 1fr。那样 header
中就有五个一律大小的列,放置导航项和按钮会很适用。

header{ grid-area: header; display: grid; grid-template-columns: 1fr
1fr; }

1
2
3
4
5
header{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

亚洲必赢官网 13

要放置按钮,大家只要求将 justify-self 设置为 end。

header button { justify-self: end; }

1
2
3
header button {
    justify-self: end;
}

导航的职位遵照以下方法设置:

header nav { justify-self: start; }

1
2
3
header nav {
    justify-self: start;
}

上面代码中,div元素(代表骰子的多少个面)是Flex容器,span成分(代表八个点)是Flex项目。假使有多个品种,就要添加多个span成分,以此类推。
1.1 单项目
第3,唯有左上角三个点的意况。Flex布局私下认可正是首行左对齐,所以一行代码就够了。

测试 Flexbox 和 CSS Grid 的主题布局

作者们从三个很简短且熟练的布局项目初叶,蕴含标题,侧边栏,首要内容和页脚等局地。通过如此二个简便的布局,来扶持大家火速找到各类成分的布局方法。

上面是急需成立的始末: 

亚洲必赢官网 14

要做到那些基本布局,
Flexbox 需求实现的严重性职务蕴含以下地方:

  • 开创完整宽度的
    header 和 footer
  • 将侧边栏放置在主内容区域左边
  • 担保侧边栏和主内容区域的轻重缓急合适
  • 保证导航成分定位准确

 

应用 Flexbox 和 CSS Grid 成立布局

说到底,大家通过整合 Flexbox 和 CSS Grid 来创立更扑朔迷离的布局。

亚洲必赢官网 15

主导的布局如下图所示:

亚洲必赢官网 16

那种布局须要磨练有素和列七个趋势上保持一致,所以采用 CSS Grid
完成一体化布局十一分使得。

亚洲必赢官网 17

统一筹划对于布局的落到实处的话,拾叁分生死攸关。

接下去看看代码如何一步步完成。首先 display: grid;
是中央设置,其次内容块之间的间隔,能够经过 grid-column-gap 和
grid-row-gap 实现。

.container { display: grid; grid-template-columns: 0.4fr 0.3fr 0.3fr;
grid-column-gap: 10px; grid-row-gap: 15px; }

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

亚洲必赢官网 18

基本 HTML 结构

<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->
    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /container -->

 

– 列和行布局

Header 部分横跨全数的列。

.header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1;
grid-row-end: 2; background-color: #d5c9e2; }

1
2
3
4
5
6
7
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #d5c9e2;
}

也足以运用简写,开端值和完工值位于同一行上,并用斜杠分隔。就像那样:

.header { grid-column: 1 / 4; grid-row: 1 / 2; background-color:
#55d4eb; }

1
2
3
4
5
.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #55d4eb;
}

做到网格布局的创设之后,微调内容便是下一步。

.box { display: flex;}

选用 Flexbox 创立布局

– 导航

Flexbox 卓殊适合放置 header 成分。基本的 header 布局需求安装
justify-content: space-between。

地方的 CSS Grid 布局示例中,须求在导航栏设置
justify-self:start;,在按钮设置 justify-self: end;,不过借使使用
Flexbox,导航的距离会变得很不难设置。

.header { grid-column: 1 / 4; grid-row: 1 / 2; color: #9f9c9c;
text-transform: uppercase; border-bottom: 2px solid #b0e0ea; padding:
20px 0; display: flex; justify-content: space-between; align-items:
center; }

1
2
3
4
5
6
7
8
9
10
11
.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

亚洲必赢官网 19

设置项指标对齐格局,就能实现居中对齐和右对齐。

– Header 样式

大家从外到内,逐层开始筹划,首先将
display: flex; 添加到 container,那也是颇具 Flexbox
布局的率先步。接着,将 flex-direction 设置为
column,确定保障全部片段互相相对。

.container {
    display: flex;
    flex-direction: column;
}

因而display: flex; 自动创建2个全宽的 header(header
暗中同意境况下是块级成分)。通过这几个宣称,导航成分的放置会变得很不难。

导航栏的左侧有1个logo 和四个菜单项,右边有3个记名按钮。导航位于 header 中,通过
justify-content: space-between;
能够完结导航和按钮之间的活动间隔。

在导航中,使用
align-items: baseline;
能够落到实处全部导航项目与公事基线的对齐,那样也使得导航栏看起来更为统一。

亚洲必赢官网 20

代码如下:

header{
    padding: 15px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

– 列内容网格

将所需的因素排列在三个趋势上,意味全体因素都处于同一横向维度,平日Flexbox是兑现那种布局的更好选取。其它,Flexbox
能够动态调整成分。使用
Flexbox,能够将兼具因素连成一条直线,那也准保了颇具因素都具备同等的惊人。

亚洲必赢官网 21

– 页面内容样式

接下去,将侧边栏和主内容区域使用八个wrapper 包涵起来。具有 .wrapper 类的 div,也急需设置 display: flex; 但是flex
方向与上述分歧。那是因为侧边栏和主内容区域竞相相邻而不是堆叠。

.wrapper {
    display: flex;
    flex-direction: row;
}

亚洲必赢官网 22

主内容区域和侧边栏的大大小小设置格外首要,因为根本的新闻都在此地显得。主内容区域应该是侧面栏大小的三倍,使用
Flexbox 很简单实现那点。

.main {
    flex: 3;
    margin-right: 60px;
}

.sidebar {
   flex: 1;
}

总的看,Flexbox
在创制那个不难的布局时,十一分神速。特别在支配列表成分样式和安装导航与按钮之间的间距方面,特别有用。

 

– 带有文本和按钮的行内容

下图是包蕴了“额外”文本和按钮的四个区域。Flexbox 能够轻松设置三列的小幅。

.extra { grid-column: 2 / 4; grid-row: 4 / 5; padding: 1rem; display:
flex; flex-wrap: wrap; border: 1px solid #ececec; justify-content:
space-between; }

1
2
3
4
5
6
7
8
9
.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

亚洲必赢官网 23

.box { display: flex; justify-content: center;}

运用 CSS Grid 成立布局

为了测试成效,接下去使用
CSS Grid 创设相同的主干布局。 

亚洲必赢官网 24

规划艺术总计

如上的布局规划中,使用了 CSS Grid
来进行全部布局(以及设计中的非线性部分)。对于网格内容区域的规划,使用
Flexbox 进行体制的排序和微调会更易于完毕。

1 赞 5 收藏
评论

亚洲必赢官网 25

亚洲必赢官网 26

– Grid 模板区域

CSS Grid
的方便人民群众之处在于,能够钦命模板区域,那也使得定义布局变得特别直观。接纳那种办法,网格上的区域能够命名并引述地点项。对于那些宗旨布局,大家须求命名七个类型:

  • header
  • main
    content
  • sidebar
  • footer

基本 HTML
结构

<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>

    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
            <li></li>
         <li></li>
         <li></li>
         <li></li>
        </ul>
    </aside>

    <section class="main">
        <h2></h2>
        <p></p>
        <p> </p>
    </section>

    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div>

作者们依据顺序在
grid container 中定义那么些区域,就像是绘制它们等同。

grid-template-areas:

       
“header header”

       
“sidebar main”

       
“footer footer”;

当前侧边栏位于左侧,主区域内容位于左边,如若急需,也可以轻松转移顺序。

有一件事要留意:这几个名字须求“连接”到样式上。所以须求在
header block 中,添加 grid-area: header;。

header{
    grid-area: header;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

HTML
结构与 Flexbox 示例中的相同,但 CSS 与制造网格布局完全差异。

.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-gap: 50px;
}

利用 CSS
Grid 布局时,在 container 中安装 display: grid; 格外关键。此处注脚grid-template-columns,是为着确定保证页面的欧洲经济共同体结构。那里
grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr
是网格的分数单位。

 亚洲必赢官网 27

接下去,须求调整
header 容器中的 fr 单元。将 grid-template-columns 设置为 1fr 和
1fr。那样 header
中就有八个一律大小的列,放置导航项和按钮会很方便。

header{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

亚洲必赢官网 28

要放置按钮,我们只必要将
justify-self 设置为 end。

header button {
    justify-self: end;
}

导航的职位遵照以下办法设置:

header nav {
    justify-self: start;
}

 

.box { display: flex; justify-content: flex-end;}

动用 Flexbox 和 CSS Grid 成立布局

说到底,大家经过整合
Flexbox 和 CSS Grid 来成立更复杂的布局。

亚洲必赢官网 29 

主导的布局如下图所示:

亚洲必赢官网 30

那种布局供给锻炼有素和列两个样子上保持一致,所以使用
CSS Grid 完结完整布局13分实惠。

亚洲必赢官网 31 

设计对于布局的实现的话,11分主要。

接下去看看代码怎么着一步步完毕。首先
display: grid; 是骨干设置,其次内容块之间的间隔,能够透过
grid-column-gap 和 grid-row-gap 达成。

.container {
  display: grid;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

安装交叉轴对齐格局,能够垂直运动主轴。

– 列和行布局

Header
部分横跨全部的列。

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #d5c9e2;
}

也得以采纳简写,开始值和了结值位于同一行上,并用斜杠分隔。就好像这么:

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #55d4eb;
}

完了网格布局的构建之后,微调内容就是下一步。

亚洲必赢官网 32

– 导航

Flexbox
卓殊适合放置 header 成分。基本的 header 布局必要安装 justify-content:
space-between。

地点的
CSS Grid 布局示例中,要求在导航栏设置 justify-self:start;,在按钮设置
justify-self: end;,可是假诺选取Flexbox,导航的间隔会变得很不难设置。

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

亚洲必赢官网 33

.box { display: flex; align-items: center;}

– 列内容网格

将所需的要素排列在多个样子上,意味全体因素都地处同一横向维度,日常Flexbox是促成那种布局的更好选择。其余,Flexbox
能够动态调整成分。使用
Flexbox,能够将享有因素连成一条直线,那也保险了具备因素都存有同样的冲天。

亚洲必赢官网 34

– 带有文本和按钮的行内容

下图是包涵了“额外”文本和按钮的多个区域。Flexbox
能够轻松设置三列的上涨幅度。

.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

亚洲必赢官网 35

.box { display: flex; justify-content: center; align-items: center;}

安顿格局总计

上述的布局规划中,使用了
CSS Grid
来开始展览完全布局(以及设计中的非线性部分)。对于网格内容区域的设计,使用
Flexbox 进行体制的排序和微调会更便于达成。

初稿链接:

转发请申明来源:葡萄城控件

 

有关阅读:

【报表福利大放送】100余套报表模板免费下载

最风靡的5个前端框架比较

二〇一七年前端框架、类库、工具大比拼

Angular vs React
最全面深切比较

 

亚洲必赢官网 36

.box { display: flex; justify-content: center; align-items: flex-end;}

亚洲必赢官网 37

.box { display: flex; justify-content: flex-end; align-items: flex-end;}

1.2 双项目

亚洲必赢官网 38

.box { display: flex; justify-content: space-between;}

亚洲必赢官网 39

.box { display: flex; flex-direction: column; justify-content:
space-between;}

亚洲必赢官网 40

.box { display: flex; flex-direction: column; justify-content:
space-between; align-items: center;}

亚洲必赢官网 41

.box { display: flex; flex-direction: column; justify-content:
space-between; align-items: flex-end;}

亚洲必赢官网 42

.box { display: flex;}.item:nth-child(2) { align-self: center;}

亚洲必赢官网 43

.box { display: flex; justify-content: space-between;}.item:nth-child(2)
{ align-self: flex-end;}

1.3 三项目

亚洲必赢官网 44

.box { display: flex;}.item:nth-child(2) { align-self:
center;}.item:nth-child(3) { align-self: flex-end;}

1.4 四项目

亚洲必赢官网 45

.box { display: flex; flex-wrap: wrap; justify-content: flex-end;
align-content: space-between;}

亚洲必赢官网 46

HTML代码如下。
<div class=”box”> <div class=”column”> <span
class=”item”></span> <span class=”item”></span>
</div> <div class=”column”> <span
class=”item”></span> <span class=”item”></span>
</div></div>

CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content:
space-between;}.column { flex-basis: 100%; display: flex;
justify-content: space-between;}

1.5 六项目

亚洲必赢官网 47

.box { display: flex; flex-wrap: wrap; align-content: space-between;}

亚洲必赢官网 48

.box { display: flex; flex-direction: column; flex-wrap: wrap;
align-content: space-between;}

亚洲必赢官网 49

HTML代码如下。
<div class=”box”> <div class=”row”> <span
class=”item”></span> <span class=”item”></span>
<span class=”item”></span> </div> <div
class=”row”> <span class=”item”></span> </div>
<div class=”row”> <span class=”item”></span> <span
class=”item”></span> </div></div>

CSS代码如下。
.box { display: flex; flex-wrap: wrap;}.row{ flex-basis: 100%;
display:flex;}.row:nth-child(2){ justify-content:
center;}.row:nth-child(3){ justify-content: space-between;}

1.6 九项目

亚洲必赢官网 50

.box { display: flex; flex-wrap: wrap;}

二 、网格布局
2.1 基本网格布局
最简单易行的网格布局,就是平均分布。在容器里面平均分配空间,跟上边的骰子布局很像,但是要求安装项目标全自动缩放。

亚洲必赢官网 51

HTML代码如下。
<div class=”Grid”> <div class=”Grid-cell”>…</div>
<div class=”Grid-cell”>…</div> <div
class=”Grid-cell”>…</div></div>

CSS代码如下。
.Grid { display: flex;}.Grid-cell { flex: 1;}

2.2 百分比布局
某个网格的大幅为定位的比重,其他网格平均分配剩余的空中。

亚洲必赢官网 52

HTML代码如下。
<div class=”Grid”> <div class=”Grid-cell
u-1of4″>…</div> <div class=”Grid-cell”>…</div>
<div class=”Grid-cell u-1of3″>…</div></div>

.Grid { display: flex;}.Grid-cell { flex: 1;}.Grid-cell.u-full { flex: 0
0 100%;}.Grid-cell.u-1of2 { flex: 0 0 50%;}.Grid-cell.u-1of3 { flex: 0 0
33.3333%;}.Grid-cell.u-1of4 { flex: 0 0 25%;}

三 、圣杯布局
圣杯布局)(Holy
Grail
Layout)指的是一种最广泛的网站布局。页面从上到下,分成八个部分:底部(header),躯干(body),底部(footer)。个中人体又水平分为三栏,从左到右为:导航、主栏、副栏。

亚洲必赢官网 53

HTML代码如下。
<body class=”HolyGrail”> <header>…</header> <div
class=”HolyGrail-body”> <main
class=”HolyGrail-content”>…</main> <nav
class=”HolyGrail-nav”>…</nav> <aside
class=”HolyGrail-ads”>…</aside> </div>
<footer>…</footer></body>

CSS代码如下。
.HolyGrail { display: flex; min-height: 100vh; flex-direction:
column;}header,footer { flex: 1;}.HolyGrail-body { display: flex; flex:
1;}.HolyGrail-content { flex: 1;}.HolyGrail-nav, .HolyGrail-ads { /*
四个边栏的大幅度设为12em / flex: 0 0 12em;}.HolyGrail-nav { /
导航放到最左边 */ order: -1;}

如若是小显示屏,躯干的三栏自动成为垂直叠加。
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column;
flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex:
auto; }}

四 、输入框的布局
作者们平日需求在输入框的战线添加提醒,后方添加按钮。

亚洲必赢官网 54

HTML代码如下。
<div class=”InputAddOn”> <span
class=”InputAddOn-item”>…</span> <input
class=”InputAddOn-field”> <button
class=”InputAddOn-item”>…</button></div>

CSS代码如下。
.InputAddOn { display: flex;}.InputAddOn-field { flex: 1;}

⑤ 、悬挂式布局
偶然,主栏的左边或右手,供给加上3个图片栏。

亚洲必赢官网 55

HTML代码如下。
<div class=”Media”> <img class=”Media-figure” src=”” alt=””>
<p class=”Media-body”>…</p></div>

CSS代码如下。
.Media { display: flex; align-items: flex-start;}.Media-figure {
margin-right: 1em;}.Media-body { flex: 1;}

六 、固定的底栏
神迹,页面内容太少,不能占满一屏的冲天,底栏就会抬高到页面包车型客车高级中学级。那时能够行使Flex布局,让底栏总是出现在页面包车型地铁最底层。

亚洲必赢官网 56

HTML代码如下。
<body class=”Site”> <header>…</header> <main
class=”Site-content”>…</main>
<footer>…</footer></body>

CSS代码如下。

.Site { display: flex; min-height: 100vh; flex-direction:
column;}.Site-content { flex: 1;}

七,流式布局
每行的花色数一定,会自行分行。

亚洲必赢官网 57

CSS的写法。
.parent { width: 200px; height: 150px; background-color: black; display:
flex; flex-flow: row wrap; align-content: flex-start;}.child {
box-sizing: border-box; background-color: white; flex: 0 0 25%; height:
50px; border: 1px solid red;}

(完)

网站地图xml地图