Por qué no se me organizan en horizontal los items con flex box?

Estoy intentando manejarme con flexbox y según lo que leo, por defecto, se organizan en horizontal (“row”). Pero nada, no consigo que se alineen de esta forma…

Muchas gracias

Aquí os dejo mi código:

*{     box-sizing: border-box; }  header{     background-color: indianred;     display: flex;     flex-direction: row;     justify-content: space-between;     align-items: center; }  .logoizquierda{     font-family: 'Oswald', sans-serif; }  .logoizquierda a{     text-decoration: none;     color: white;     font-size: 30px; }  .buscar{     border: rgba(255, 255, 255, 0.6) 2px solid; }  .buscar input{     background-color: transparent;     border: none; }  .buscar button{     background-color: transparent;     border: none; }  ::placeholder{     color: white; }    .menu ul{     list-style: none;     color: white; }  .menu a{     text-decoration: none;     color: white; }
<!DOCTYPE html> <html lang=""> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">     <link rel="stylesheet" href="<?php echo RUTA; ?>css/estilos.css">     <title>Mi Blog</title> </head>  <body>     <header>         <div class="contenedor">             <div class="logoizquierda">                 <p>                     <a href="#">                         Mi primer Blog                     </a>                 </p>             </div>                          <div class="derecha">                 <form name="busqueda" class="buscar" action="<?php echo RUTA; ?>/buscar.php" method="get">                     <input type="text" name="busqueda" placeholder="Buscar">                     <button type="submit" class="fas fa-search"></button>                 </form>                                  <nav class="menu">                     <ul>                         <li><a href="#"><i class="fab fa-twitter"></i></a></li>                         <li><a href="#"><i class="fab fa-facebook"></i></a></li>                         <li><a href="#">Contacto <i class="fas fa-envelope"></i></a></li>                     </ul>                 </nav>             </div>         </div>     </header> </body> </html>

Fundo com gradiente em CSS funciona na horizontal mas não pra vertical

A réplica do codigo: https://codepen.io/utamo/pen/XoyzWN

ao aplicar no body:

background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%); 

tenho o seguinte resultado inserir a descrição da imagem aqui

mas ao trocar pra

background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); 

acaba ficando assim inserir a descrição da imagem aqui

Sei que é algo simples mas me falta conhecimento no momento

Why do vertical images flip horizontal after upload?

I run into this issue once in a while and I am not sure what it is. For example I have an image that I get from a non Drupal site or directly from a camera. If I view the image via Preview on my Mac or on a browser from the site it displays vertically. As soon as upload to my Drupal site, it flips horizontally.

To go around this I just open the image on my Mac and just re-save.

I always thought that my computer somehow is rotating the images just for display (based on some logic) but really in the background it is still a horizontal image. But I don’t understand why the image displays correctly in the browser from the non Drupal site?

Excel Horizontal

como le puedo hacer para que, desde el momento que se descarga el excel y lo abro la orientación sea horizontal.

He intentado poner esto desde el inicio del código, pero no funciona.

$  objPHPExcel->getActiveSheet()->getPageSetup()->setHorizontalCentered(true); $  objPHPExcel->getActiveSheet()->getPageSetup()->setVerticalCentered(false); 

Horizontal mega menu with flexbox

I created a mega menu using flexbox, and because I’m not really into CSS, a review would be helpful.

I know it would be better to avoid the third ul-level but this is not possible, because the HTML is generated by another system. And we decided to use the second ul level as a marker for a new row in the mega menu.

ul {   width: 100%;   display: flex;   flex-direction: column;   list-style: none;   margin: 0 0 0 0;   padding: 0;   position: relative;   background: red; } ul li {   flex: 1 1 auto;   display: block;   text-align: left; } ul li:hover {   background: tomato; } ul li:hover ul {   display: flex; } ul li a {   display: block;   padding: 1rem 0; } ul li ul {   display: none;   left: 0;   width: 100%; } ul li ul li {   flex: 0 0 auto; }  @media screen and (min-width: 37.5em) {   ul {     flex-direction: row;   }   ul li {     text-align: center;     background: green;   }   ul ul {     position: absolute;   }   ul ul a {     padding: 1rem;   }   ul ul li {     position: relative;     text-align: left;   }   ul ul li ul {     position: relative;   }   ul ul li ul li {     flex-basis: 100%;   } }
<nav>   <ul>     <li><a href="#">home</a></li>     <li><a href="#">products</a>       <ul>         <li><a href="#">short</a>           <ul>             <li><a href="#">long</a></li>           </ul>         </li>         <li><a href="#">item 1</a>           <ul>             <li><a href="#">long item 2</a></li>           </ul>         </li>       </ul>     </li>     <li><a href="#">whatever</a>       <ul>         <li><a href="#">superlong sub 1</a></li>         <li><a href="#">s 2</a></li>       </ul>     </l>     <li><a href="#">go</a></li>     <li><a href="#">on</a></li>   </ul> </nav>

Is horizontal scroll usable in mobile view?

When building a responsive view of a page with a grid of content boxes, is it a good solution to use a horizontal scroll? Imagine page layout with a header, main column of content (680px) and a sidebar (300px), in the sidebar are widgets of members, about, tag cloud, related topics, etc. In mobile view, the idea is to place those widgets at the top (below header and above content) and use the horizontal scroll of the widgets.

Is horizontal scroll usable in mobile view?

When building a responsive view of a page with a grid of content boxes, is it a good solution to use a horizontal scroll? Imagine page layout with a header, main column of content (680px) and a sidebar (300px), in the sidebar are widgets of members, about, tag cloud, related topics, etc. In mobile view, the idea is to place those widgets at the top (below header and above content) and use the horizontal scroll of the widgets.

What are the available options that we have to better optimize the horizontal space inside our modern pages

We have a classic online team site where we added a new modern page to it, and we set the modern page as the home page of the site. something as follow-

enter image description here

But currently we have, 2 wasted horizontal spaces (I highlighted them in red arrows inside my above picture) , as follow:-

  1. the area where the logo and the site title is being rendered.

  2. the home page banner image (containing the desert image).

so are there any approaches (built-in or using coding) , that can allow us to minimize the height of these 2 components or at-least one of them?