flexbox布局_这是您可以使用FlexBox制作的5种布局

最新推荐文章于 2024-10-11 21:03:44 发布

cumichun6193

最新推荐文章于 2024-10-11 21:03:44 发布

阅读量203

点赞数

文章标签： java css python html web

原文链接：https://www.freecodecamp.org/news/here-are-5-layouts-that-you-can-make-with-flexbox-6ca1e941f33d/

版权

flexbox布局

The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face in designing a responsive website design.

CSS灵活框布局(Flexbox)为设计人员和开发人员使用CSS所面临的设计和布局问题提供了简单的解决方案。让我向您展示如何使用它来生成一些常见的布局和设计响应式网站设计时将面临的挑战。

I assume you already know the basis of Flexbox. If not there are many documents teaching you about Flexbox. I would recommend Understanding Flexbox: Everything you need to know.

我假设您已经知道Flexbox的基础。如果没有，那么有很多文档可以教您关于Flexbox的知识。我建议您了解Flexbox：您需要了解的所有内容。

这就是我们将要做的 (Here is What We Will Be Making)

In this article, I am going to show you how to make 7 different layouts using FlexBox.

在本文中，我将向您展示如何使用FlexBox制作7种不同的布局。

Navigation
导航
Center image on screen
屏幕中央图像
Responsive website layout
响应式网站布局
AddOn for input fields
输入字段的插件
3 column layout
3列布局

获取代码 (Get The Code)

All of the examples that I am going to show can be downloaded from my GitHub account. The code for every example is just html and css. I have created a master homepage that provides a link to every example that we are going to cover.

我要显示的所有示例都可以从我的GitHub帐户下载。每个示例的代码都是html和CSS。我创建了一个母版主页，该主页提供了指向我们将要介绍的每个示例的链接。

Every website has a navigation. Using Flexbox you can create a navigation that has your company name on the left and menu items on the right.

每个网站都有导航。使用Flexbox，您可以创建一个导航，该导航的公司名称在左侧，菜单项在右侧。

To accomplish this layout in CSS, you would have to use floats to get some content to appear on the left and the rest of the content to appear on the right.

要在CSS中完成此布局，您将必须使用浮点数使一些内容显示在左侧，而其余内容显示在右侧。

With FlexBox you have to specify a flex container that contains the navigation. The company name on the left is a flex item within this container.

使用FlexBox，您必须指定一个包含导航的flex容器。左侧的公司名称是此容器中的弹性项目。

The menu items on the right are their own flex container with a <ul> containing all the menu items.

右侧的菜单项是它们自己的flex容器，带有<ul>，其中包含所有菜单项。

Here is the html for the navigation:

这是导航的html：

Here is the CSS for the navigation:

这是导航CSS：

屏幕中心图像 (Center Image on Screen)

Many websites include a full size image. Usually this image contains text that is centered on the screen.

许多网站都包含完整尺寸的图片。通常，此图像包含在屏幕上居中的文本。

The challenge is styling the image so that it fits full page regardless of whether you are viewing this on a wide screen monitor, laptop, tablet or phone and have the CSS remain centered on the screen. Flexbox makes it easy to do this. To mimic text centered on the screen I have included a button

挑战在于对图像进行样式设置，以使其适合整个页面，无论您是在宽屏显示器，笔记本电脑，平板电脑还是手机上查看图像，并且CSS始终位于屏幕中央。 Flexbox使其易于执行此操作。为了模仿屏幕上居中的文本，我添加了一个按钮

Here is the html to center an image on the screen:

这是将图像放在屏幕中央的html：

Here is the css to center an image on the screen:

这是使图像在屏幕上居中CSS：

响应式网站布局 (Responsive Website Layout)

Almost every website has the same layout which contains a navigation across the top and a footer at the bottom. In between there are 3 columns consisting or a right and left sidebar and the main content area. Generally the main content area takes up 60% of the width of the screen and the two sidebars are allocated 20% of the screen each.

几乎每个网站都具有相同的布局，其中包含顶部的导航和底部的页脚。在它们之间有3列，分别是左右边栏和主要内容区域。通常，主要内容区域占据屏幕宽度的60％，两个侧边栏分别分配给屏幕的20％。

The challenge for creating a responsive website is having the footer stay at the bottom of the page regardless of how much content is displayed. The content area should scroll if there is more than can be displayed on the page.

创建响应式网站的挑战在于，无论显示多少内容，页脚都位于页面底部。如果页面上显示的内容超出范围，则内容区域应滚动。

Here is the html for the responsive website layout:

这是响应式网站布局的html：

Here is the css code for the responsive website layout:

这是响应式网站布局CSS代码：

输入字段的附加组件 (AddOn for Input Field)

To improve your user experience, many designers prefer to put images or text in their input fields. This provides the user with directions on what should be included in the field.

为了改善您的用户体验，许多设计师更喜欢将图像或文本放在其输入字段中。这为用户提供了有关该字段应包含的内容的指导。

With traditional CSS that was very challenging and required you to use a table format to insert something before or after an input field. With Flexbox it is much easier.

对于传统CSS来说，这非常具有挑战性，需要您使用表格格式在输入字段之前或之后插入内容。使用Flexbox会容易得多。

Here is the html code for the addon for input fields:

这是用于输入字段的插件的html代码：

Here is the css code for addon for input field:

这是输入字段的插件CSS代码：