Using flexbox positioning with one item at top one at bottom - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex

Description

Using flexbox positioning with one item at top one at bottom

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  gc-nomade</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
.primary__section {<!--   w  ww. j av  a 2s .  com-->
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat;
   background-size:cover;
   background-position:51%;
   min-height:100vh;
   width:100%;
   display:flex;
   justify-content:space-between;
   align-items:center;
   flex-direction:column;
}

[alt="middle"] {
   margin:auto;
}

[alt=" bottom"] {
   margin:0 auto 0;
}

body {
   margin:0;
   background:linear-gradient(to left, transparent 51%, Chartreuse 51%),
   linear-gradient(to top, transparent 51%, rgba(0,0,0,0.3) 51%)
}
</style> 
 </head> 
 <body translate="no"> 
  <section class="primary__section"> 
   <img class=" primary__section__logo " src="https://www.java2s.com/style/demo/Firefox.png" alt="middle"> 
   <img class=" primary__section__scroll " src="https://www.java2s.com/style/demo/Firefox.png" alt=" bottom"> 
  </section>  
 </body>
</html>

Related Tutorials