Clever Geek Handbook

Flexbox vertically align some items to the top, some items to the bottom

I have an image of what I am trying to create with HTML / CSS. I took a quick look at flexbox. I don't want to explicitly set the height of the text div.

I have a jsfiddle where I am right now - http://jsfiddle.net/wxc0jmjw/1/ (there are no images in the js script) Basically, I just need some text at the top of the container, some at the bottom, and the height should be variable depending on the height of the content. Any help is appreciated!

.flexbox-container {
  padding: 20px;
  background: #eee;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: flex-end;
}

.flexbox-vert-item {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}

.flexbox-vert-item2 {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}

.demo-wrapper {
  min-height: 500px;
}

<div class="flexbox-container">
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Blah blah 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 </div>
  </div>

  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Blah blah blah blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
  </div>

</div>

Diagram of what I'm trying to create

+3


source to share


1 answer


Made a few changes to your CSS (and removed flexbox

vendor prefix properties for convenience ). The following changes are required:

  • Remove -webkit-align-items: center;

    to allow .wrapper

    full height.flexbox-container

  • Make children in .wrapper

    use flexbox by adding display: flex;

    in.wrapper

  • Make the children .wrapper

    sorted from top to bottom by adding flex-direction: column;

    in.wrapper

  • Allow .flexbox-vert-item2

    to grow and take up available space by adding flex: 1;

    in.flexbox-vert-item2 



.flexbox-container {
  padding: 20px;
  background: #eee;
  display: flex;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.flexbox-vert-item {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}
.flexbox-vert-item2 {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
  flex: 1;
}
.demo-wrapper {
  min-height: 500px;
}
      

        
        
        
      

    
<div class="flexbox-container">
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Text at the bottom Blah blah 123 123 123 123 123 123 123123 123123 123 123 123 12123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 1233123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123</div>
  </div>
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Text at the bottom Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
  </div>
</div>
Run codeHide result


JS Fiddle: http://jsfiddle.net/ek38ff5r/4/

0


source






More articles:


All Articles