【翻訳】柔軟なレイアウトを使用して、よく使用される 10 個の UI コンポーネントを作成_html/css_WEB-ITnose

Flexbox スタイル

CSS3 の柔軟なレイアウトを使用して 10 個の一般的な UI コンポーネントを記述する方法を見てみましょう。

Flexbox パターンから翻訳

ディレクトリ

「display: flex」属性で開始

Flexbox CSS の基本属性は、 display: flex です。 give この属性を要素に追加することで、柔軟なレイアウトが可能になります。それはとても簡単です！

この属性はどのような役割を果たしているのかと疑問に思われるかもしれません。デフォルトでは、コンテナ内の子要素が主軸 (デフォルトでは水平) に沿って配置されるように指定されます。

次に、2 つの例を使用して、この属性が UI コンポーネントでどのように使用されるかを紹介します。

歩数カウンターのデモ

最初に紹介する例は、歩数入力ボックス コンポーネントです。 JavaScript コードをバインドした後、+ / - 記号をクリックすると、入力ボックスの値がそれに応じて増減します。

訳: ここでのカウンターの実装では、JavaScript の代わりに CSS カウンターを使用することもできます。具体的な例については、CSS カウンターインクリメントを使用して作成されたゲームを参照してください。

前のアイデアによれば、このインライン スタイルを実装するには、display: inline-block または float: left を使用することを選択できます。ただし、これを行うには、これらの各要素に特定のセレクターを追加する必要もあります。フレックス ボックスを使用して、display: flex 属性をコンテナに追加するだけで同じ効果を実現できます。

この属性を追加すると、要素に対して「おい、フレックスボックス ルールに従って子要素を配置する責任を負ってください!」と言うのと同じになります。最も基本的な形式では、要素は主軸 (デフォルトでは X 軸) に沿って左から右に配置されます。

CSS コード

.stepperInput {  /**   * Setting display to flex makes this container lay   * out its children using flexbox. By default, it    * orders items horizontally, top-aligned.   * This has a similar effect to setting the children   * to have display: inline-block.   */  display: flex;}.stepperInput__input {  border-left: 0;  border-right: 0;  width: 60px;  text-align: center;}.button {  cursor: pointer;  padding: 5px 15px;  color: #FFFFFF;  background-color: #4EBBE4;  font-size: 12px;  border: 1px solid #16A2D7;  border-radius: 4px;}.button--addOnLeft {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.button--addOnRight {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}.input {  border: 1px solid #D7DBDD;  padding: 0 10px;  border-radius: 0;  box-shadow: none;}

HTML コード

<div class="stepperInput">  <button class="button button--addOnLeft">-</button>  <input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>  <button class="button button--addOnRight">+</button></div>

タブのデモ

同様に、display: flex を使用します。 このタブページ効果も得られます。

CSS コード

.tabs {  /**   * Setting display to flex makes this container lay   * out its children using flexbox, the exact same   * as in the above "Stepper input" example.   */  display: flex;  border-bottom: 1px solid #D7DBDD;}.tab {  cursor: pointer;  padding: 5px 30px;  color: #16A2D7;  font-size: 12px;  border-bottom: 2px solid transparent;}.tab.is-tab-selected {  border-bottom-color: #4EBBE4;}

HTML コード

<div class="tabs">  <div class="tab is-tab-selected">Tab 1</div>  <div class="tab">Tab 2</div>  <div class="tab">Tab 3</div>  <div class="tab">Tab 4</div></div>

翻訳: タブの切り替え効果は純粋な CSS を通じて実現できます。タブの CSS トリックを参照できます。 JavaScript なしのデモ

サイト ヘッダーのデモ

このコンポーネントは、Web サイトまたは Web アプリのトップとして使用できます。

この種のコンポーネントを構築するための一般的なアプローチは、ロゴとナビゲーション ボタンを 1 つのコンテナーにラップし、設定ボタンを別のコンテナーにラップすることです。次に、フロートを使用して 2 つのコンテナを両側に押します。次に、最上位要素全体をクリアします。これも単純なレイアウトには複雑すぎます。

フレックスボックスを使用する場合もコンテナ要素が必要ですが、フレックスボックスでは既に親要素がレイアウトを処理できるため、コンテナに特定のスタイルを追加する必要はありません。

レイアウトを調整するには、display: flex 属性に加えて、他の 2 つの属性も必要です。

• justify-content: space-between を使用すると、左と左を分離できるようになります。適切なコンテナ。このプロパティにより、ロゴとナビゲーション ボタンが左側に移動し、設定が右側に移動します。
• align-items: center 主軸上の要素を垂直方向と中央に揃えます。ロゴとナビゲーション ボタンの高さは異なり、このプロパティが設定されていない場合、デフォルトで上端に揃えられるため、このプロパティは重要です。

.siteHeader {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  /**   * Make the container put as much space as possible   * between its children, with the children at either   * end laying flush against the container's edges.   */  justify-content: space-between;  padding: 10px;  background-color: #56727C;}.siteHeader__section {  /**   * Lay out the children of this container with   * flexbox.   */  display: flex;  /**   * Align the children in the center, along   * the main axis. By default the children will   * align along their top edges.   */  align-items: center;}.siteHeader__item {  padding: 5px 15px;  font-size: 12px;}.siteHeader__item + .siteHeader__item {  margin-left: 5px;}.siteHeader__item.is-site-header-item-selected {  color: #FFFFFF;  background-color: #415F69;  border-radius: 4px;}.siteHeaderLogo {  font-size: 20px;  line-height: 0;  color: white;}.siteHeaderButton {  cursor: pointer;  color: #D9E9EF;}

<div class="siteHeader">  <!-- This section gets pushed to the left side-->  <div class="siteHeader__section">    <div class="siteHeader__item siteHeaderLogo">      <div class="fa fa-inbox"></div>    </div>    <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>    <div class="siteHeader__item siteHeaderButton">Sent</div>    <div class="siteHeader__item siteHeaderButton">Trash</div>  </div>  <!-- This section gets pushed to the right side-->  <div class="siteHeader__section">    <div class="siteHeader__item siteHeaderButton">Settings</div>  </div></div>

フォームの下部にデモ

フォームの下部に進捗状況のサークルや検証フィードバックを配置することもできます。形状。上の例と同様に、フレックスボックスを使用して、このコンテンツをフォーム送信ボタンから分離します。

CSS コード

.formFooter {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  /**   * Align the children in the center, along   * the main axis, which is horizontal in this case.   */  align-items: center;   /**   * Make the container put as much space as possible   * between its children, with the children at either   * end laying flush against the container's edges.   */  justify-content: space-between;  border-top: 1px solid #D7DBDD;  padding: 10px;}.formFooter__section {  /**   * This container orders items horizontally.   */  display: flex;  /**   * It aligns them vertically in the center.   */  align-items: center;}.formFooter__item + .formFooter__item {  margin-left: 5px;}.formFooterFeedback {  color: #86969C;  font-size: 12px;  line-height: 0;}.formFooterSpinner {  animation: formFooterSpinner 1s infinite steps(8, end);}@keyframes formFooterSpinner {  0%   { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}.button--clear {  color: #16A2D7;  background-color: #FFFFFF;  border: 1px solid #FFFFFF;}

HTML コード

<div class="formFooter">  <!-- This section gets pushed to the left side-->  <div class="formFooter__section">    <div class="formFooter__item formFooterFeedback">      <div class="fa fa-spinner formFooterSpinner"></div> Saving...    </div>  </div>  <!-- This section gets pushed to the right side-->  <div class="formFooter__section">    <div class="formFooter__item button button--clear">Reset</div>    <div class="formFooter__item button">Save</div>  </div></div>

サイドバーのデモ

これもかなり古典的なコンポーネントです。構造化するのに flexbox さえ必要ありません。div で十分です...ただし、デザイナーが以下のボタンの 1 つを単独で移動するように要求した場合は、position:Absolute を使用してそれを処理するか、もちろん flexbox を使用できます。

display: flex と justify-content: space-between に加えて、別の属性も必要です:

• flex-direction: 列は主軸を水平方向から変更します縦向きに変更します。ご想像のとおり、子要素は垂直方向に配置されます。

CSS コード

.sideBar {  /**   * This container orders items according to flexbox   * rules. By default, this would arrange its children   * horizontally. However, the next property...   */  display: flex;  /**   * ...sets the main axis to be vertical instead of   * horizontal, so now the children are laid out   * vertically, from top to bottom.   */  flex-direction: column;  /**   * It will also put as much space as possible   * between its children, with the children at either end   * laying flush against the container's edges.   */  justify-content: space-between;  height: 300px;  width: 150px;  border-right: 1px solid #D7DBDD;  background-color: #FCFDFD;  padding: 10px;}.sideBar__item {  cursor: pointer;  padding: 5px 10px;  color: #16A2D7;  font-size: 12px;}.sideBar__item.is-side-bar-item-selected {  background-color: #EEF3F5;  border-radius: 4px;}

HTML コード

<div class="sideBar">  <!-- This section gets pushed to the top-->  <div class="sideBar__section">    <div class="sideBar__item is-side-bar-item-selected">Inbox</div>    <div class="sideBar__item">Contacts</div>    <div class="sideBar__item">Account</div>  </div>  <!-- This section gets pushed to the bottom-->  <div class="sideBar__section">    <div class="sideBar__item">Legal</div>  </div></div>

中央揃えプロンプトのデモ

フレックスボックスを使用しない 中央揃え通常、レイアウトには絶対レイアウトを使用してから 2D 変換を介して変換するなど、いくつかのハックが必要です。フレックスボックスを使用すると、コンテナ要素に次の 4 つのプロパティを設定するだけで済みます:

• 表示: フレックス
• flex-direction: 列
• align-items: 中央設定または フレックスボックス要素の交差軸 (垂直軸) 方向の配置を取得します。ここでの効果は、text-align: center の設定に似ています。
• justify-content: center 子要素が主軸の中心に近づきます。

CSS コード

.centeredPrompt {  /**   * Lay out the children of this container with   * flexbox.   */  display: flex;  /**   * Rotate the main axis so that the children   * are laid out vertically, the same as in the   * above "Side bar" example.   */  flex-direction: column;  /**   * Align the children in the center, along   * the main axis. Because the direction is   * "column" this has a similar effect as setting   * text-align: center.   */  align-items: center;  /**   * Instead of pushing the children apart, as in   * previous examples, we will group them together   * in the center of their container.   */  justify-content: center;  min-height: 300px;  padding: 10px;}.centeredPrompt__item + .centeredPrompt__item {  margin-top: 5px;}.centeredPromptIcon {  font-size: 60px;  line-height: 0;}.centeredPromptLabel {  color: #86969C;  font-size: 30px;  font-weight: 700;  text-align: center;}.centeredPromptDetails {  color: #86969C;  font-size: 16px;  margin-bottom: 10px;  text-align: center;}.icon {  color: #BCD2DA;}

HTML コード

<div class="centeredPrompt">  <div class="centeredPrompt__item centeredPromptIcon">    <div class="icon fa fa-smile-o"></div>  </div>  <div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>  <div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>  <div class="centeredPrompt__item button">Begin tour</div></div>

中央揃えアイコンのデモ

同じ方法を使用、アイコンなど、さらに多くのものを中央に配置することもできます。

CSS コード

.centeredIcon {  /**   * Lay out the children of this container with   * flexbox.   */  display: flex;  /**   * As in the above "Centered prmopt" example,   * we'll rotate the main axis so that the children   * are ordered vertically.   */  flex-direction: column;  /**   * And just like in that example, align the children   * in the center, along the main axis.   */  align-items: center;  /**   * Same thing here as before: group the children   * together in the center of their container.   */  justify-content: center;  border: 1px solid #D7DBDD;  font-size: 40px;  width: 90px;  height: 90px;  border-radius: 100%;  box-shadow:    0 2px 1px rgba(0, 0, 0, 0.05),    0 2px 3px rgba(0, 0, 0, 0.05),    0 4px 8px rgba(0, 0, 0, 0.05);}

HTML コード

<div class="centeredIcon">  <div class="icon fa fa-phone"></div></div>

機能リストのデモ

在这个列表中，其中一行是反向排列的，实现方法很简单，只需要添加一个 flexbox 属性：

flex-direction: row-reverse 把容器中的子元素按照 HTML 中的顺序反向排列。

CSS 代码

.featureListItem {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  /**   * Align the children in the center, along   * the main axis, which is horizontal in this case.   */  align-items: center;  max-width: 400px;  padding: 10px;}.featureListItem + .featureListItem {  border-top: 1px solid #D7DBDD;}.featureListItem--reverse {  /**   * We can specify the flex-direction so that   * the children elements are displayed in the   * reverse order of how they appear in the   * markup.   */  flex-direction: row-reverse;}.featureListItem__icon,.featureListItem__description {  padding: 5px 15px;}.featureListItem__icon {  font-size: 50px;  line-height: 0;}.featureListItem__description {  color: #86969C;  font-size: 12px;}

HTML 代码

<div class="featureListItem">  <div class="featureListItem__icon">    <div class="icon fa fa-calendar"></div>  </div>  <div class="featureListItem__description">The calendar feature makes scheduling a snap.</div></div><div class="featureListItem featureListItem--reverse">  <div class="featureListItem__icon">    <div class="icon fa fa-dashboard"></div>  </div>  <div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div></div><div class="featureListItem">  <div class="featureListItem__icon">    <div class="icon fa fa-envelope"></div>  </div>  <div class="featureListItem__description">You can get notified by email or SMS.</div></div>

卡片 Demo

接下来复习一下，这个卡片的组件用到了此前提到的属性。

• display: flex
• flex-direction: column
• align-items: center
• justify-content: center

这里没什么新的知识点，但是为我们接下来要介绍的卡片组做了铺垫。

CSS 代码

.card {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  /**   * Rotate the main axis so that the children   * are laid out vertically.   */  flex-direction: column;  border: 1px solid #CAD0D2;  border-radius: 4px;  overflow: hidden;}.card__description {  /**   * Lay out the children of this container with   * flexbox.   */  display: flex;  /**   * We're going to lay out this element's children   * just like in the "Centered prompt" example.   * First we'll rotate the main axis so that the    * children are laid out vertically.   */  flex-direction: column;  /**   * Just like in the "Centered prompt" example,   * we'll align the children in the center, along   * the main axis.   */  align-items: center;  /**   * And just like in the "Centered prompt", we'll   * group the children in the center of their   * container.   */  justify-content: center;  padding: 15px;}.card__descriptionIcon {  font-size: 32px;  margin-bottom: 10px;}.card__descriptionText {  color: #57727C;  font-size: 12px;  text-align: center;}.card__price {  text-align: center;  color: #57727C;  font-size: 12px;  font-weight: 700;  padding: 5px 15px;  border-top: 1px solid #D7DBDD;  background-color: #EEF3F5;}.card--fixedWidth {  max-width: 120px;}

HTML 代码

<div class="card card--fixedWidth">  <div class="card__description">    <div class="icon fa fa-flask card__descriptionIcon"></div>    <div class="card__descriptionText">Science potion</div>  </div>  <div class="card__price">Costs $5</div></div>

卡片组 Demo

现在我们来学习最后一个 “卡片组” 组件。我们需要考虑两个麻烦的地方：

1. 我们想要每个卡片的宽度相等，但是里面包含的内容多少可能各不相同。
2. 我们想要所有的卡片注释高度相等，同样，每张卡片的注释长度也不相等。

不适用 flexbox，你可能会想到使用 table 元素来实现这些需求，或者对所有元素使用绝对布局，并组合使用百分比、像素和 calc() 来实现。这样也太复杂了。

使用弹性盒子，整个问题的解决方案就变得优雅多了。这里我们引入一个新的属性，但是和之前我们提到的属性不同，这个属性应用在 子元素 而不是容器。

我们为每张卡片设置 flex: 1 1 0 ，使得每张卡片的宽度相等。这个属性是以下三个属性的简写方法：

• flex-grow: 1 设置或检索弹性盒的扩展比率。默认值为 0，我们设置为 1，此时卡片会尽可能扩展以填充容器。
• flex-shrink: 1 设置或检索弹性盒的收缩比率。默认值为 1。我们设置为 1，此时卡片会尽可能收缩以适应容器。
• flex-basis: 0 设置或检索弹性盒伸缩基准值。设置为 0 的时候，其大小仅由容器的大小所决定。

这些属性满足了第一点要求。对于我们的第二个要求，我们可以对 flex 属性稍作调整，改成 flex: 1 1 auto 。

• flex-basis: auto 导致卡片注释的高度自适应，意思就是最长的注释框拥有最大的高度。由于注释同时拥有 flex-grow: 1 属性，因此较短注释的卡片会自动伸长来适配容器高度。

.cardGroup {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  border: 1px solid #CAD0D2;  border-radius: 4px;  overflow: hidden;}.cardGroup__card {  /**   * The flex property is a short-hand for setting   * the flex-shrink, flex-grow, and flex-basis   * properties. These properties control how the   * element resizes to fill its container.   *   * We'll also set flex-grow to 1 so that it   * will expand to fill its container. (The   * default value is 0.)   *   * We'll set flex-shrink to 1 so that the element   * will shrink as its container gets smaller.   * (The default value is 1.)   *   * Last, we set flex-basis to 0 so that its   * size is solely determined by the size of   * the container. (The default value   * is auto, which would cause the content's   * size to also be a factor in this calculation.)   *   * The net result of these properties is that the   * element is a fluid size, and will expand and   * shrink with its container and siblings, but   * they will all have the same size, even if they   * have different amounts of content.   */  flex: 1 1 0;  border: none;  border-radius: 0;}.cardGroup__card + .cardGroup__card {  border-left: 1px solid #D7DBDD;}.cardGroup__cardDescription {  /**   * We're doing almost the exact same thing here as   * we did above. The difference is that its   * flex-basis is auto, so now the size of its content   * will affect how large it is.   */  flex: 1 1 auto;}

<div class="cardGroup">  <div class="card cardGroup__card">    <div class="card__description cardGroup__cardDescription">      <div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>      <div class="card__descriptionText">Trial</div>    </div>    <div class="card__price">Free!</div>  </div>  <div class="card cardGroup__card">    <div class="card__description cardGroup__cardDescription">      <div class="icon fa fa-trophy card__descriptionIcon"></div>      <div class="card__descriptionText">Basic tier<br/>(most popular)</div>    </div>    <div class="card__price">$10.00</div>  </div>  <div class="card cardGroup__card">    <div class="card__description cardGroup__cardDescription">      <div class="icon fa fa-bolt card__descriptionIcon"></div>      <div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>    </div>    <div class="card__price">$6,000.00</div>  </div></div>