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


i trying move towards flexboxes , stumbled across first problem. have created wrapper, logo fits on left , message area takes same height, on far right. in middle 2 stacked flexboxes, top being news ticker , bottom being menu. problem having news ticker not @ top, , menu not underneath it. driving me nuts. can 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>

the problem having news ticker not @ top, , menu not underneath it.

the news ticker ul has default top margin. that's why it's pushing away top border. close gap apply margin-top: 0 #head_news rule.

the menu not underneath news ticker because flex-direction property set row. have set in head_wrap id shorthand declaration flex-flow: row wrap, defines flex-direction , flex-wrap properties. row value aligns flexbox children (technically known "flex items") in row.

i have created wrapper, logo fits on left , message area takes same height, on far right. in middle 2 stacked flexboxes, top being news ticker , bottom being menu.

to stack news ticker , menu in column – between 2 other flex items – should wrap both in flex container , set flex-direction: 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: don't need order property make work.

http://jsfiddle.net/n29v5q5n/

hope helps. if have questions post comment below.


-

Comments

Post a Comment

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

Image
in code below when try execute main.java getting exception: exception in thread "main" org.hibernate.unknownentitytypeexception: unable locate persister: com.np.vta.test.pojo.users @ org.hibernate.internal.sessionfactoryimpl.locateentitypersister(sessionfactoryimpl.java:792) @ org.hibernate.internal.sessionimpl.locateentitypersister(sessionimpl.java:2637) @ org.hibernate.internal.sessionimpl.access$2500(sessionimpl.java:164) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2575) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2562) @ org.hibernate.internal.sessionimpl.byid(sessionimpl.java:1044) @ org.hibernate.internal.sessionimpl.get(sessionimpl.java:955) @ com.app.test.main.main(main.java:20) but if uncomment cfg.addclass( users.class ).addresource( "com/np/vta/test/pojo/users.hbm.xml" ); code works fine. why not reading <mapping...
Read more

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

i'm using (for first time) scikit library , got error: valueerror: empty vocabulary; perhaps documents contain stop words file "c:\users\a605563\desktop\velibprojetpreso\traitementtwitterdico.py", line 33, in <module> x_train_counts = count_vect.fit_transform(filetweets) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 804, in fit_transform self.fixed_vocabulary_) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 751, in _count_vocab raise valueerror("empty vocabulary; perhaps documents contain stop words but don't understand why that's happening. import sklearn sklearn.feature_extraction.text import countvectorizer import pandas pd import numpy import unicodedata import nltk tweetsfile = open('tweets2015-08-13.csv', 'r+') f2 = open('analyzer.txt', 'a') print tweetsfile.readline() count_vect = countvectorizer(strip_accents='ascii...
Read more

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -

Image
i'm trying build precimonious on ubuntu 16.04.3 x64. allocated 1gb memory it. file structure looks like ~ |--- llvm/ |--- precimonious/ where llvm on version 3.0 mentioned @ https://github.com/corvette-berkeley/precimonious#requirement . followed steps on readme command make ended with ... llvm[1]: linking debug shared library libllvm-3.0.so collect2: fatal error: ld terminated signal 9 [killed] compilation terminated. ... i went through answers online , might because there's not enough memory perform link. memory usage the gcc version on machine gcc version 5.4.0 20160609 (ubuntu 5.4.0-6ubuntu1~16.04.4) , installed via apt-get install build-essential . fresh droplet created on digitalocean btw. appreciated. it memory exhaustion. sampling interval memory measurement not small enough covers exact point oom killer kicks in. depending on container/vm technology, may able set vm.overcommit_memory=2 before build, process not killed (but doing requires m...
Read more