添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局

本文介绍了添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！下面是我正在开发的CSS FLexbox布局。这里有一个实例，以及不断更新的CodePen：演示 .wrapper {border：1px固体＃D7DBDD; margin-bottom：100px; max-width：1076px;}。button {padding：5px 15px;颜色：#FFF; background-color：＃4EBBE4; border：1px solid＃16A2D7; border-radius：4px; font-size：16px; cursor：pointer; font-family：Raleway，Helvetica，sans-serif;}。siteHeader {/ ** *用* flexbox展开这个容器的子项，默认是水平的。 * / display：flex; / ** *使容器在孩子之间放置尽可能多的空间*，孩子们在任一*端与容器的边缘齐平。 * / justify-content：space-between; padding：10px; background-color：＃56727C;}。siteHeader__section {/ ** *使用* flexbox布局此容器的子项。 * / display：flex; / ** *将孩子们对准中心，沿*主轴。默认情况下，孩子们将沿着它们的顶部边缘对齐。 * / 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;}。container {display：flex; flex-direction：row;} main {display：flex; width：100％;}。sideBar {/ ** *此容器根据flexbox *规则订购项目。默认情况下，这将水平安排其孩子*。但是，下一个属性... * / display：flex; / ** * ...设置主轴为垂直而不是水平，因此现在孩子们从上到下垂直排列。 * / flex-direction：column; / ** *它还会在孩子之间放置尽可能多的空间*，孩子们在两端*与容器的边缘齐平。 * / justify-content：space-between; height：auto; width：150px; background-color：#FCFDFD; padding：10px;}。sideBar-left {border-right：1px solid＃D7DBDD;}。sideBar-right {border-left：1px solid＃D7DBDD; width：750px;}。sideBar__item {cursor：pointer; padding：5px 10px;颜色：＃16A2D7; font-size：12px;}。sideBar__item.is-side-bar-item-selected {background-color：＃EEF3F5; border-radius：4px;}。formFooter {/ ** *用* flexbox展开这个容器的子元素，默认情况下是水平的。 * / display：flex; / ** *使容器在孩子之间放置尽可能多的空间*，孩子们在任一*端与容器的边缘齐平。 * / justify-content：space-between; / ** *将孩子们对准中心，沿*主轴，在这种情况下是水平的。 * / align-items：center; border-top：1px solid＃D7DBDD; padding：10px;}。formFooter__section {/ ** *此容器水平地排列项目。 * / display：flex; / ** *它们在中心垂直对齐。 * / align-items：center;}。formFooter__item + .formFooter__item {margin-left：5px;}。formFooterFeedback {color：＃86969C; font-size：12px; line-height：0;}。formFooterSpinner {animation：formFooterSpinner 1s无限步（8，end）;} @ keyframes formFooterSpinner {0％{transform：rotate（0deg）; } 100％{transform：rotate（360deg）; }}。button - clear {color：＃16A2D7; background-color：#FFFFFF; border：1px solid #FFFFFF;}。centeredPrompt {/ ** *使用* flexbox布局此容器的子项。 * / display：flex / ** *旋转主轴使儿童*垂直放置，与上述侧栏中的*相同。 * / flex-direction：column; / ** *不像之前的例子中那样推动孩子们分开，我们将他们组合在一起*在他们的容器的中心。 * / justify-content：center; / ** *将孩子们对准中心，沿*主轴。因为方向是*列，这具有与设置* text-align：center类似的效果。 * / align-items：center; min-height：300px; padding：10px; width：100％;}。centeredPrompt__item + .centeredPrompt__item {margin-top：5px;}。centerPromptIcon {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 {/ ** *用* flexbox展开这个容器的子元素，默认是水平的。 * / display：flex; / ** *允许孩子包装到下一个行，而不是试图把它们全部挤压成一行。 * / flex-wrap：wrap; width：100％; padding：5px;}。photo {display：flex; -ms-flex-pack：end; justify-content：flex-end; -ms-flex-align：end; align-items：flex-end; width：145px; margin：5px; padding：5px 10px; font-size：18px; font-weight：700; text-shadow：0 2px 3px rgba（0，0，0，.5）;颜色：#FFF; background-size：cover; background-position：center; border-radius：4px; height：130px;不透明度：1; border：4px solid #ffffff; cursor：pointer;}。photo.selected，.photo：hover {opacity：0.3; border：4px solid＃F44336;}。photo1 {background-image：url（'http://www.flexboxpatterns.com/images/dog_2.jpg'）;} .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'）;} < div class =wrapper> <！ - START HEADER - > < div class =siteHeader> <！ - 此部分被推到左侧 - > < 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>已发送< / div> < div class =siteHeader__item siteHeaderButton>垃圾箱< / div> < / div> <！ - 此部分被推向右侧 - > < div class =siteHeader__section> < div class =siteHeader__item siteHeaderButton>设置< / div> < div class =siteHeader__item siteHeaderButton>退出< / div> < / div> < / div> <！ - END HEADER - > < div class =container> <！ - START LEFT SIDEBAR - > < div class =sideBar sideBar-left> <！ - 此部分被推到顶部 - > < 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>帐户< / div> < / div> <！ - 此部分被推到底部 - > < div class =sideBar__section> < div class =sideBar__item>更改主题< / div> < div class =sideBar__item> Legal< / div> < / div> < / div> <！ - END LEFT SIDEBAR - > < main> <！ - START GALLERY - > < - - - - - - - - - - - - - - - - - - - - - - - - - - < 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 selected> 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 - > < / main> <！ - END CENTERED PROMPT - > <！ - RIGHT-SIDEBAR - > < div class =sideBar sideBar-right>表单字段将在此加载来自左面板中所选图像的数据<！ - 此部分被推到顶部 - < 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>帐户< / div> < / div> - > < / div> <！ - END RIGHT-SIDEBAR - > < / div> <！ - START BOTTOM FORM FOOTER BAR - > < div class =formFooter> <！ - 此部分被推到左侧 - > < div class =formFooter__section> < div class =formFooter__item formFooterFeedback> < div class =fa fa-spinner formFooterSpinner>< / div>& nbsp;保存...< / div> < / div> <！ - 此部分被推向右侧 - > < div class =formFooter__section> < div class =formFooter__item button button - clear> Reset< / div> < div class =formFooter__item button>保存< / div> < / div> < / div> < / div> 注意：此解决方案假设工具栏不会在运行中改变高度。这里的诀窍是将填充应用于 position：relative; container，与 position：absolute; 工具栏的大小一致。因为可能你将再次使用元素的 formFooter 和 main ，我们将使用实用程序类表示它们有工具栏。这些实用程序类将包含有关 padding 的信息，在 formFooter 的情况下，扩展它们的行为 main.with-header { padding-top：50px; position：relative; } .gallery - header { height：50px; top：0; left：0; right：0; background-color：blue; position：absolute; } .sideBar.sideBar-with-footer { position：relative; padding-bottom：50px; } .sideBar.sideBar-with-footer .formFooter { position：absolute; bottom：0; left：0; right：0; } HTML < div class =wrapper> <！ - START HEADER - > < div class =siteHeader> <！ - 此部分被推到左侧 - > < 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>已发送< / div> < div class =siteHeader__item siteHeaderButton>垃圾箱< / div> < / div> <！ - 此部分被推向右侧 - > < div class =siteHeader__section> < div class =siteHeader__item siteHeaderButton>设置< / div> < div class =siteHeader__item siteHeaderButton>退出< / div> < / div> < / div> <！ - END HEADER - > < div class =container> <！ - START LEFT SIDEBAR - > < div class =sideBar sideBar-left> <！ - 此部分被推到顶部 - > < 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> <！ - 此部分被推到底部 - > < div class =sideBar__section> < div class =sideBar__item>更改主题< / div> < div class =sideBar__item> Legal< / div> < / div> < / div> <！ - END LEFT SIDEBAR - > < main class =with-header> < div class =gallery - header> < p>图库标题< / p> < / div> <！ - START GALLERY - > <！ - 它应该是左边栏的权利，但是当前在边栏下面并且FORM FOOTER BAR - > < div class =gallery> < div class =photo photo 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 selected> 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 - > < / main> <！ - END CENTERED PROMPT - > <！ - RIGHT-SIDEBAR - > < div class =sideBar sideBar-right sideBar-with-footer> <！ - START BOTTOM FORM FOOTER BAR - > < div class =formFooter> <！ - 此部分被推到左侧 - > < div class =formFooter__section> < div class =formFooter__item formFooterFeedback> < div class =fa fa-spinner formFooterSpinner>< / div>& nbsp; Saving ... < / div& < / div> <！ - 此部分被推向右侧 - > < div class =formFooter__section> < div class =formFooter__item button button - clear> Reset< / div> < div class =formFooter__item button>保存< / div> < / div> < / div> <！ - END BOTTOM FORM FOOTER BAR - > < / div> <！ - END RIGHT-SIDEBAR - > < / div> < / div> CODEPEN Below is the CSS FLexbox layout I am working on. A live example is here as well as on this CodePen which is constantly updated: http://codepen.io/jasondavis/pen/OWbXNB?editors=1100I need to add 2 DIV's to the layout and need help getting them positioned where I need them.Add a header DIV above the right content panelAdd a Form Footer DIV like the current wrapper Footer with save and reset buttons along with saving indicator at the bottom of the Right SidebarLastly I need to remove the current footer, so basdically the current footer just needs to be moved to the right sidebar.So far I have tried multiple Flexbox CSS properties to try and get it into the desired positions with no luck so far.This image shows what I need better...Demo.wrapper { border: 1px solid #D7DBDD; margin-bottom: 100px; max-width: 1076px;}.button { padding: 5px 15px; color: #FFF; background-color: #4EBBE4; border: 1px solid #16A2D7; border-radius: 4px; font-size: 16px; cursor: pointer; font-family: Raleway, Helvetica, sans-serif;}.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;}.container { display: flex; flex-direction: row;}main { display: flex; width: 100%;}.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: auto; width: 150px; background-color: #FCFDFD; padding: 10px;}.sideBar-left { border-right: 1px solid #D7DBDD;}.sideBar-right { border-left: 1px solid #D7DBDD; width: 750px;}.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; width: 100%;}.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: 100%; padding: 5px;}.photo { display: flex; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: end; align-items: flex-end; width: 145px; margin: 5px; padding: 5px 10px; font-size: 18px; font-weight: 700; text-shadow: 0 2px 3px rgba(0, 0, 0, .5); color: #FFF; background-size: cover; background-position: center; border-radius: 4px; height: 130px; opacity: 1; border: 4px solid #ffffff; cursor: pointer;}.photo.selected,.photo:hover { opacity: 0.3; border: 4px solid #F44336;}.photo1 { background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');}.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');}<div class="wrapper">  <div class="siteHeader">  <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>  <div class="siteHeader__section"> <div class="siteHeader__item siteHeaderButton">Settings</div> <div class="siteHeader__item siteHeaderButton">Log out</div> </div> </div>  <div class="container">  <div class="sideBar sideBar-left">  <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>  <div class="sideBar__section"> <div class="sideBar__item">Change theme</div> <div class="sideBar__item">Legal</div> </div> </div>  <main>   <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 selected">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>  </main>   <div class="sideBar sideBar-right"> Form fields will be here loaded with Data from the selected image in the left panel  </div>  </div>  <div class="formFooter">  <div class="formFooter__section"> <div class="formFooter__item formFooterFeedback"> <div class="fa fa-spinner formFooterSpinner"></div> Saving... </div> </div>  <div class="formFooter__section"> <div class="formFooter__item button button--clear">Reset</div> <div class="formFooter__item button">Save</div> </div> </div> </div> 解决方案 NOTE: This solution assumes that the toolbars arent going to be changing height on-the-fly.The trick here is to apply padding to a position:relative; container, consistent with the sizing of a position:absolute; toolbar. Because it is likely you're going to be using the element's formFooter and main again, we will use utility classes to indicate that they have toolbars. These utility classes will contain the information about the padding and, in the case of the formFooter, extend their behaviour when a child of the utility class.CSSmain.with-header{ padding-top:50px; position:relative;}.gallery--header{ height:50px; top:0; left:0; right:0; background-color:blue; position:absolute;}.sideBar.sideBar-with-footer{ position:relative; padding-bottom:50px;}.sideBar.sideBar-with-footer .formFooter{ position:absolute; bottom:0; left:0; right:0;}HTML<div class="wrapper">  <div class="siteHeader">  <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>  <div class="siteHeader__section"> <div class="siteHeader__item siteHeaderButton">Settings</div> <div class="siteHeader__item siteHeaderButton">Log out</div> </div> </div>  <div class="container">  <div class="sideBar sideBar-left">  <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>  <div class="sideBar__section"> <div class="sideBar__item">Change theme</div> <div class="sideBar__item">Legal</div> </div> </div>  <main class="with-header"> <div class="gallery--header"> <p>Gallery Header</p> </div>   <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 selected">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>  </main>   <div class="sideBar sideBar-right sideBar-with-footer">  <div class="formFooter">  <div class="formFooter__section"> <div class="formFooter__item formFooterFeedback"> <div class="fa fa-spinner formFooterSpinner"></div> Saving... </div> </div>  <div class="formFooter__section"> <div class="formFooter__item button button--clear">Reset</div> <div class="formFooter__item button">Save</div> </div> </div>  </div>  </div></div>CODEPEN 这篇关于添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！