Question

我正在尝试使用http://www.flexboxpatterns.com

中的代码段为我的新项目构建HTML / CSS Flexbox布局

到目前为止，我目前的演示是在CodePen - http://codepen.io/jasondavis/pen/OWbXNB?editors=1000

以下是我尝试使用的每个5个Flexbox代码段的链接。基本上是

来自flexboxpatterns.com的

Flexbox HTML / CSS示例代码

Site Header Snippet = http://www.flexboxpatterns.com/site-header
左侧边栏摘录= http://www.flexboxpatterns.com/side-bar
Form Footer Snippet = http://www.flexboxpatterns.com/form-footer
居中提示 - 应该在侧边栏的右侧，而是显示在其他所有内容之下= http://www.flexboxpatterns.com/centered-prompt
图库Flexbox - 也应位于左侧边栏右侧，但显示在所有内容= http://www.flexboxpatterns.com/gallery

HTML For Flexbox Layout

<!-- START HEADER -->
<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 class="siteHeader__item siteHeaderButton">Log out</div>
  </div>
</div>
<!-- END HEADER -->




<!-- START LEFT SIDEBAR -->
<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">Change theme</div>
    <div class="sideBar__item">Legal</div>
  </div>
</div>
<!-- END LEFT SIDEBAR -->




<!-- START BOTTOM FORM FOOTER BAR -->
<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>&nbsp;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>
<!-- END BOTTOM FORM FOOTER BAR -->





<!-- START GALLERY -->
<!-- IT SHOULKD BE TO THE RIGHT OF THE LEFT SIDEBAR BUT IS CURRENTLY BELOW THE SIDEBAR AND FORM FOOTER BAR -->
<div class="gallery">
  <div class="photo photo1 photo--large">1</div>
  <div class="photo photo2 photo--large">2</div>
  <div class="photo photo3 photo--large">3</div>
  <div class="photo photo4 photo--large">4</div>
  <div class="photo photo5 photo--large">5</div>
  <div class="photo photo6 photo--large">6</div>
  <div class="photo photo7 photo--large">7</div>
  <div class="photo photo8 photo--large">8</div>
  <div class="photo photo9 photo--large">9</div>
  <div class="photo photo10 photo--large">10</div>
</div>
<!-- END GALLERY -->





<!-- START CENTERED PROMPT -->
<!-- THIS ALSO SHOULD BE RIGHT OF THE LEFT SIDEBAR IT IS JUST A RGHR CONTENT AREA BUT IS SHOWING BELOW  -->
<!-- THE SIDEBAR NOW UNTIL IT IS FIXED -->
<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&rsquo;s take a look around.</div>
  <div class="centeredPrompt__item button">Begin tour</div>
</div>
<!-- END CENTERED PROMPT -->

以上Flexbox HTML的CSS

.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;
}

.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;
}

.formFooter {
  /**
   * 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;
  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;
  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;
}

.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;
  /**
   * Instead of pushing the children apart, as in
   * previous examples, we will group them together
   * in the center of their container.
   */
  justify-content: center;
  /**
   * 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;
  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;
}

.gallery {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Allow the children to wrap to the next "row",
   * instead of trying to squeeze them all into
   * a single row.
   */
  flex-wrap: wrap;
  width: 478px;
  padding: 5px;
  border: 1px solid #D7DBDD;
}

.photo2 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}

.photo3 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}

.photo4 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}

.photo5 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}

.photo6 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_1.jpg');
}

.photo7 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}

.photo8 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}

.photo9 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}

.photo10 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}

我需要帮助的地方

如何让内容位于左侧边栏的右侧，然后是页眉宽度的页脚栏？

Answer 1

假设我理解你，这是我对flexbox的尝试。在大多数情况下，我将内容移到侧边栏旁边，然后将它们包装到container中：

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

https://codepen.io/anon/pen/EZZXOZ

Answer 2

将.sideBar，.gallery和.centeredPrompt部分移动到页眉和页脚之间页面上的新元素中，并将display: flex;应用于该新元素。然后引入另一个新元素包裹.centeredPrompt和.gallery并应用flex-grow: 1;，以便它占用.sideBar剩余的可用空间。然后根据需要定位.gallery和.centeredPrompt。

.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;
}

.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;
}

.formFooter {
  /**
   * 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;
  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;
  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;
}

.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;
  /**
   * Instead of pushing the children apart, as in
   * previous examples, we will group them together
   * in the center of their container.
   */
  justify-content: center;
  /**
   * 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;
  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;
}

.gallery {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Allow the children to wrap to the next "row",
   * instead of trying to squeeze them all into
   * a single row.
   */
  flex-wrap: wrap;
  width: 478px;
  padding: 5px;
  border: 1px solid #D7DBDD;
}


.photo2 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}

.photo3 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}

.photo4 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}

.photo5 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}

.photo6 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_1.jpg');
}

.photo7 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}

.photo8 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}

.photo9 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}

.photo10 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}

.flex {
  display: flex;
}
.main {
  flex-grow: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- START HEADER -->
<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 class="siteHeader__item siteHeaderButton">Log out</div>
  </div>
</div>
<!-- END HEADER -->


<!-- START LEFT SIDEBAR -->
<div class="flex">
  <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">Change theme</div>
      <div class="sideBar__item">Legal</div>
    </div>
  </div>
  <!-- END LEFT SIDEBAR -->

  <div class="main">
    <!-- START GALLERY -->
    <!-- IT SHOULKD BE TO THE RIGHT OF THE LEFT SIDEBAR BUT IS CURRENTLY BELOW THE SIDEBAR AND FORM FOOTER BAR -->
    <div class="gallery">
      <div class="photo photo1 photo--large">1</div>
      <div class="photo photo2 photo--large">2</div>
      <div class="photo photo3 photo--large">3</div>
      <div class="photo photo4 photo--large">4</div>
      <div class="photo photo5 photo--large">5</div>
      <div class="photo photo6 photo--large">6</div>
      <div class="photo photo7 photo--large">7</div>
      <div class="photo photo8 photo--large">8</div>
      <div class="photo photo9 photo--large">9</div>
      <div class="photo photo10 photo--large">10</div>
    </div>
    <!-- END GALLERY -->


    <!-- START CENTERED PROMPT -->
    <!-- THIS ALSO SHOULD BE RIGHT OF THE LEFT SIDEBAR IT IS JUST A RGHR CONTENT AREA BUT IS SHOWING BELOW  -->
    <!-- THE SIDEBAR NOW UNTIL IT IS FIXED -->
    <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&rsquo;s take a look around.</div>
      <div class="centeredPrompt__item button">Begin tour</div>
    </div>
    <!-- END CENTERED PROMPT -->
  </div>
</div>


<!-- START BOTTOM FORM FOOTER BAR -->
<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>&nbsp;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>
<!-- END BOTTOM FORM FOOTER BAR -->

获取CSS Flexbox布局以环绕内容区域

HTML For Flexbox Layout

以上Flexbox HTML的CSS

我需要帮助的地方

2 个答案: