vux flexbox使用_使用Flexbox使表格变得有趣

vux flexbox使用

Curious about deep-diving into Flexbox? Check out our Master CSS Layouts with Flexbox course by front-end dev and General Assembly London teacher Guy Routledge. It’s available for all SitePoint members. Watch our sample video from the course below.

想深入了解Flexbox吗？ 查阅前端开发人员和大会伦敦的Guy Guy Routledge 提供的Flexbox Master CSS Layouts课程 。 它适用于所有SitePoint成员。 观看下面课程的示例视频。

Loading the player…

正在加载播放器…

I’ll come clean: HTML forms are rarely fun – but they’re a necessary part of web development. Fortunately, some historical difficulties can be alleviated with CSS flexbox.

我会告诉您的： HTML表单很少会很有趣 –但是它们是Web开发的必要部分。 幸运的是，使用CSS flexbox可以缓解一些历史上的困难。

Consider how forms are typically coded without flexbox. What HTML mark-up would you use for the following fields?

考虑通常如何在没有 flexbox的情况下对表单进行编码。 您将在以下字段中使用哪种HTML标记？

We would normally use mark-up as such:

我们通常会这样使用标记：

<div>
  <label for="name">name</label>
  <input id="name" name="name" type="text" />
</div>

<div>
  <label for="experience">experience</label>
  <select id="experience" name="experience"><!-- options --></select>
</div>

<div>
  <input id="html" name="html" type="checkbox" />
  <label for="html">HTML</label>
</div>

<div>
  <input id="css" name="css" type="checkbox" />
  <label for="css">CSS</label>
</div>

<div>
  <input id="javascript" name="javascript" type="checkbox" />
  <label for="javascript">JavaScript</label>
</div>

A number of issues arise as you begin to apply CSS styling:

当您开始应用CSS样式时，会出现许多问题：

1. The HTML source order of the label and field is inconsistent and depends on the type. The label typically comes before the field but is better after checkboxes and radio buttons. You must re-order your mark-up if you change the type.
   标签和字段HTML源顺序不一致，并且取决于类型。 该标签通常位于该字段之前，但最好位于复选框和单选按钮之后。 如果更改类型，则必须重新排序标记。
2. Consistently aligning and sizing inputs, textareas and select boxes can be difficult. Most have default styles which can be awkward to change in some browsers.
   始终难以对齐和调整输入，文本区域和选择框的大小。 大多数具有默认样式，在某些浏览器中可能很难更改这些样式。
3. Aligning a label next to its field requires trial and error to get the positioning correct.
   将标签与其字段对齐需要反复尝试才能正确定位。
4. It’s (currently) impossible to style a label according to the field’s activation or content state when it appears first.
   当标签第一次出现时，根据该字段的激活或内容状态(当前)来设置标签样式是不可能的。

Flexbox can solve these issues. We can use clean and consistent HTML where the label is placed after every field and it’s not necessary to add helper CSS classes.

Flexbox可以解决这些问题。 我们可以使用干净一致HTML，将标签放置在每个字段之后，而不必添加辅助CSS类。

什么是Flexbox？ (What’s Flexbox?)

Flexbox is a magical way to layout multiple elements on the page. They can be aligned in horizontally, vertically, in order, reversed and sized in relation to other elements. Flexbox can be confusing and, even after using them for months, you’ll need to consult documentation now and again. However, the most basic CSS to enable flexbox:

Flexbox是一种在页面上布局多个元素的神奇方法。 它们可以相对于其他元素在水平，垂直，顺序，反向和大小上对齐。 Flexbox可能会令人困惑，即使使用了几个月后，您也需要一次又一次地查阅文档。 但是，启用flexbox的最基本CSS：

.container {
  display: flex;
}

That’s it. All child elements of the .container are now flexbox items which, by default, will size themselves into a single row.

而已。 .container所有子元素现在都是flexbox项，默认情况下，它们会将自身大小调整为一行。

The main difference between flexbox and grid systems (such as the new CSS Grid Module) is that flexbox is one-dimensional. Flexbox items are laid in a line and wrap when necessary. Grids are two-dimensional with defined columns and non-wrapping rows.

flexbox和网格系统(例如新的CSS Grid Module )之间的主要区别在于flexbox是一维的。 Flexbox项排成一行，并在必要时进行包装。 网格是二维的，具有已定义的列和未包装的行。

Flexbox is less powerful than a grid but it’s ideal for laying out smaller components such as navigation menus, lists and form fields.

Flexbox的功能不及网格，但非常适合布置较小的组件，如导航菜单，列表和表单字段。

Flexbox tools and resources:

Flexbox工具和资源：

• flexbox in 5 minutes

  5分钟内使用flexbox

• Flexbox Froggy

  Flexbox Froggy

• Solved by Flexbox

  由Flexbox解决

• Flexbox Playground

  Flexbox游乐场

• flexplorer

  伸缩式

• MDN Using CSS Flexible Boxes

  使用CSS柔性盒的MDN

• How z-index and Auto Margins Work in Flexbox

  z-index和自动边距在Flexbox中如何工作

• CSS Grid Layout Module Level 1 specification

  CSS网格布局模块1级规范

为什么不上课？ (Why no Classes?)

Those who have adopted CSS philosophies such as SMACSS or BEM will be horrified by the dearth of class definitions in this article. The HTML and tag-targetting CSS is intended to keep the code clean and aid understanding without distraction.

那些采用诸如SMACSS或BEM之类CSS哲学的人会因本文中缺少类定义而感到震惊。 HTML和以标签为目标CSS旨在保持代码整洁并有助于理解而不会分散注意力。

You could consider the code as a base style for all forms on your site – presuming you have a consistent layout throughout. You can add classes should you want to use but they may not necessary for smaller sites or demonstrations.

您可以将代码视为网站上所有表单的基本样式- 假设您在整个页面中的布局都是一致的 。 您可以添加要使用的类，但对于较小的站点或演示，可能不需要添加类。

灵活包装表格 (Flexboxing the Form)

The code for the image above can be seen in action here:

上面图像的代码可以在此处查看操作：

See the Pen Flexboxed Forms by SitePoint (@SitePoint) on CodePen.

见笔Flexboxed形式由SitePoint( @SitePoint上) CodePen 。

Examine the HTML and you’ll notice that label elements are always defined after the field regardless of the type, e.g.

检查HTML，您会注意到，无论类型如何，总是在字段之后定义label元素，例如

<div>
  <input id="name" name="name" type="text" />
  <label for="name">name</label>
</div>

<div>
  <select id="experience" name="experience"><!-- options --></select>
  <label for="experience">experience</label>
</div>

<div>
  <input id="html" name="html" type="checkbox" />
  <label for="html">HTML</label>
</div>

Each <div> is set as a flexbox container and align-items: center ensures labels and fields align vertically:

每个<div>都设置为flexbox容器，并设置align-items：center确保标签和字段垂直对齐：

fieldset div {
  display: flex;
  align-items: center;
}

The field and the label are now flexbox items but, in most cases, they’re in the wrong order because we want the label first:

现在，字段和标签是flexbox项，但是在大多数情况下，它们的顺序不正确，因为我们首先需要标签：

(This is how the form appears on older browsers such as IE9 and below)

(这是表单在旧版浏览器(例如IE9及更低版本)上的显示方式)

We can fix ordering using the appropriately-named order property which is set to a positive or negative integer. The lower the number, the “sooner” it is displayed on the page:

我们可以使用适当命名的order属性来修复排序，该属性设置为正整数或负整数。 数字越小，页面上显示的“越早”：

label {
  order: 1;
  width: 10em;
  padding-right: 0.5em;
}

input, textarea, select {
  order: 2;
  flex: 1 1 auto;
}

We apply a width and padding to the label to ensure they align consistently. One disadvantage of flexbox is that you may need to adjust this width if you introduce longer text labels.

我们对标签应用width和padding以确保它们一致对齐。 flexbox的一个缺点是，如果引入更长的文本标签，则可能需要调整该宽度。

Note the flex: 1 1 auto setting for input, textarea and select fields. flex is a shorthand property which specifies how the item can alter its dimensions to fill the available space. The three values are:

请注意flex: 1 1 auto设置input ， textarea和select字段。 flex是一种简写属性 ，用于指定项目如何更改其尺寸以填充可用空间。 这三个值是：

• flex-grow – the amount of space a flex item can grow in relation to others, e.g. a value of 2 would permit the item to be twice the width of any item with a value of 1.

  flex-grow –伸缩项目相对于其他项目可以增加的空间量，例如，值为2会使该项目的宽度是值为1的任何项目的宽度的两倍。

• flex-shrink – similarly, the amount of space a flex item can shrink in relation to others.

  flex-shrink –同样，flex项相对于其他项可以收缩的空间量。

• flex-basis – the initial width of a flex item.

  flex-basis –弹性项目的初始宽度。

flex: 1 1 auto essentially says: use whatever space remains. Our field elements are sized the same and there’s no need to mess around with paddings and borders!

flex: 1 1 auto本质上说： 使用剩余的空间 。 我们的字段元素的大小是相同的，并且不需要弄乱填充和边框！

Unfortunately, our checkbox fields are now styled incorrectly (yes, that wouldn’t have happened if we used class names!) but we can target checkboxes and radio fields directly to fix that. The following code places the field first again, stops it using all the space and applies a margin which matches our label width set above:

不幸的是，我们的复选框字段现在的样式设置不正确(是的，如果我们使用类名，那不会发生！)，但是我们可以直接将复选框和单选字段作为目标来解决此问题。 下面的代码再次将字段放在第一位，使用所有空间停止它，并应用与上面设置的标签宽度相匹配的边距：

input[type="checkbox"], input[type="radio"] {
  order: 1;
  flex: none;
  width: auto;
  margin-left: 10em;
}

We can also target the associated labels using a sibling selector (~ or + is fine) because they come after the field in our HTML source. We can switch off the default width and apply a little padding:

我们还可以使用同级选择器来定位关联的标签( ~或+可以)，因为它们位于HTML源代码中的字段之后。 我们可以关闭默认宽度并应用一些填充：

input[type="checkbox"] ~ label, input[type="radio"] ~ label {
  width: auto;
  padding-left: 0.4em;
}

Sprinkle on a few colors and styles and we have a glorious form which will look great no matter what fields we throw at it.

撒上几种颜色和样式，我们有一个光荣的形式，无论我们在哪个领域投掷，它都会看起来很棒。

标签样式 (Label Style)

Another advantage of the label coming last is that we can style it according to the state of its field. For example, set the label to red when the field has focus:

标签最后的另一个优点是我们可以根据其字段的状态对其进行样式设置。 例如，当字段具有焦点时，将标签设置为红色：

input:focus ~ label, textarea:focus ~ label, select:focus ~ label {
  color: #933;
}

or make the label bold when a checkbox or radio button is checked:

或在选中复选框或单选按钮时将标签设为粗体：

input:checked ~ label {
  font-weight: bold;
}

Add a few CSS transitions and you can make labels to resize, move, fade or have any other animated effect.

添加一些CSS过渡，您可以制作标签来调整大小，移动，淡入淡出或具有任何其他动画效果。

Flexbox浏览器支持 (Flexbox Browser Support)

Flexbox is supported in all current mainstream browsers. IE11 has several flexbox issues but they don’t arise in the simple properties we’re using for this example. IE10 requires -ms- prefixes but will work.

当前所有主流浏览器均支持Flexbox 。 IE11有几个flexbox问题，但是我们在此示例中使用的简单属性中没有这些问题。 IE10需要-ms-前缀，但可以使用。

Older browsers display all fields before the label but the tab ordering remains correct and it is obvious which field you’re using.

较早的浏览器会在标签之前显示所有字段，但是选项卡顺序仍然正确，并且很明显您正在使用哪个字段。

My only hesitation is screen readers. Confusion could arise if a reader relies on the HTML source order rather than the associated label text. I’m not aware of any specific issues but please let me know if you encounter one!

我唯一的犹豫是屏幕阅读器。 如果读者依赖HTML源代码顺序而不是相关的标签文本，可能会造成混乱。 我不知道任何具体问题，但是如果遇到任何问题，请告诉我！

Finally, if this encourages you to apply flexbox liberally over your forms, be aware that display: flex cannot be applied to <fieldset> elements owing to bugs in Chrome and Firefox. Hope that tip saves you some of the hours I wasted!

最后，如果这鼓励您在表单上自由地应用flexbox，请注意，由于Chrome和Firefox中的错误 ， display: flex无法应用于<fieldset>元素。 希望该提示可以节省您一些我浪费的时间！

翻译自: https://www.sitepoint.com/make-forms-fun-with-flexbox/

vux flexbox使用