CODEWITHSUNDEEP
htmlcssflexbox
user3344341
user3344341

Reputation: 105

In a flexbox, how can I arrange 2 items in a row and 2 items in a column?

I am trying to move towards flexboxes and stumbled across my first problem. I have created a wrapper, a logo that fits on the left and a message area that takes the same height, but on the far right. In the middle I would like 2 stacked flexboxes, the top being the news ticker and the bottom being the menu. The problem that I am having is that the news ticker is not at the very top, and the menu is not underneath it. This is driving me nuts. Can anyone help me please.

body
{
   color: #CF6;
   margin: 0 auto;
   font-size: 1.0em;
   max-width: 1280px;
   overflow-y: scroll;
   text-transform: uppercase;
   font-family: "Tahoma", Verdana, sans-serif;
   background: black;
}

#head_Main
{
   height: 112px;
   margin-bottom: -112px;
   border: 2px solid #444;
}

#head_Wrap
{
   width: 92%;
   display: flex;
   margin: 0 auto;
   xmin-width: 40em;
   max-width: 84em;
   flex-flow: row wrap;
   border: 1px solid orange;
}

#head_Logo
{
   top: 0;
   left: 0;
   order: 1;
   width: 77px;
   height: 112px;
   border: 1px solid red;
}

#head_Info
{
   top: 0;
   flex:1;
   order: 2;
   color: #0FF;
   height: 45px;
   display: block;
   min-width: 12em;
   font: normal 125%/45px Arial, Helvetica, sans-serif;
}

#head_News
{
   font-weight: 700;
   padding-right: 5px;
   border: 1px solid green;
}

#head_Note
{
   top: 0;
   order: 3;
   width: 77px;
   height: 112px;
   border: 1px solid cyan;
}

#head_Menu
{
   order: 4;
   flex: auto;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid blue;
}
    <body>
       <!-- header -->
       <header id="head_Main">
          <section id="head_Wrap">
             <article id="head_Logo">
                LOGO
             </article>
    
             <article id="head_Info">
                <ul id="head_News">
                   <li>NEWS TICKER</li>
                </ul>
             </article>
    
             <article id="head_Note">
                MSGS
             </article>
    
             <article id="head_Menu">
                <nav>
                   <ul>
                      MENU
                   </ul>
                </nav>
             </article>
    
          </section>
       </header>
       <!-- body -->
       <!-- footer -->
    </body>

Upvotes: 1

Views: 210

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

The problem that I am having is that the news ticker is not at the very top, and the menu is not underneath it.

The news ticker ul has a default top margin. That's why it's pushing away from the top border. To close the gap apply a margin-top: 0 to the #head_News rule.

The menu is not underneath the news ticker because the flex-direction property is set to row. You have it set in the head_Wrap ID with the shorthand declaration flex-flow: row wrap, which defines the flex-direction and flex-wrap properties. The row value aligns the flexbox children (technically known as the "flex items") in a row.

I have created a wrapper, a logo that fits on the left and a message area that takes the same height, but on the far right. In the middle I would like 2 stacked flexboxes, the top being the news ticker and the bottom being the menu.

To stack the news ticker and menu in a column – between two other flex items – you should wrap both in a flex container and set the flex-direction: to column.

HTML

<div id="ticker-menu-block">

     <article id="head_Info">
        <ul id="head_News">
           <li>NEWS TICKER</li>
        </ul>
     </article>

    <article id="head_Menu">
        <nav>
           <ul>
              MENU
           </ul>
        </nav>
    </article>

</div>

CSS

.ticker-menu-block {
   display: flex;
   flex-direction: column;
}

#head_News {
   font-weight: 700;
   padding-right: 5px;
   border: 1px solid green;
   margin-top: 0;
}

Note: You don't need the order property to make this work.

http://jsfiddle.net/n29v5q5n/

Hope this helps. If you have any questions post a comment below.

Upvotes: 1

Related Questions