css3 - i want to arrange in two rows with html css flexbox

Home>2019-12-08 16:50

css3 - i want to arrange in two rows with html css flexbox

I'm sorry for the busy time, but I will ask you a question.

Arrange characters next to the smartphone image of the attached image (smartphone image row and character row next to it)
I want to do it, but it will be lined up vertically.

* The first question "② I want to change the order of characters" has been solved by changing the order of HTML

Thank you very much.

<! DOCTYPE html>
<html>
<head>
    <title>Free point card/stamp card (app) Stamp Card Piece</title>
    <link rel = "stylesheet" type = "text/css" href = "reset.css">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0">
    <meta http-equiv = "content-type" charset = "utf-8">
    <script src = "https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
        <!-contact start->
        
             <p>It can be operated without any special equipment or great effort!</p>
               Free registration here  
        
        <!-original start->
        
        
        <p>Please leave the development and operation of the original point card!</p>
        <p>Example of using StampCard Piece<br></p>
        <!-Translucent white->
        
            
            
            
            <p><Core system integration><br>Yokohama Corporation<br>
            Since it can be linked to individual sub-systems that are not limited to apps, it can also be used to measure and effect measurement.<br></p>
            <p><Large-scale operation><br>Kirindo Co., Ltd.<br>We have a track record of operating<br>applications that support 1.26 million members. Push<br>Know-how for mass access after notification is also active.<br></p>

            <p><Campaign><br>Haagen-Dazs Japan Co., Ltd.<br>Countermeasures for many users<br>Careers using various technologies such as scanning receipts<br>I support the penne.<br></p>
        

        
        



        
        
        
        <p>App development simulator</p>
        <p>By answering simple items<br>
        Create your own app<br>
        You can calculate the cost for</p>
         Use the simulator right away 
        
        
        <!-original end->
        
               Contact us here  
        
        <!-contact end->
        <!-footer start->
        
            
                
                    <ul>
                        <li>Top</li>
                        <li>/</li>
                        <li>Piece Blog Promotional Apps Development Lab</li>
                        <li>/</li>
                        <li>Enterprise package PieceCrown</li>
                        <li>/</li>
                        <li>Operating company</li>
                    </ul>
                
                
                    <p>&copy;JokerPiece Co., Ltd.</p>
                
        
        <!-footer end->
    
    <!-wrapper end->
</body>
</html>

body {
    font-family: 'Hiragino Sans', 'Hiragino Sans', YuGothic, 'Yu Gothic', sans-serif;
    color: # 2a2d2a;
    letter-spacing: 0.05em;
    line-height: 1.5;
    overflow-x: hidden;
}
a {
    transition: .4s;
}

/ * original * /
# original-all {
    margin: 10px auto 0 auto;
    background-image: url (img/haikei.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 90%;
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: bold;
}
#original p {
    font-size: 100%;
    text-align: center;
}
# original-all .komoji {
    font-size: 100%;
    margin-bottom: 10px;
    text-align: center;
}
#original {
    background: rgba (255,255,255,0.7);
    border-radius: 0px;
    margin: 5% 0;
    padding: 3% 0;
    font-size: 100%;
}
.container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 5%;
    / * grid-template-rows: 200px 200px;* /
    font-size: 100%;
}
.container .setumei {
}
.phone {
    width: 100%;
}

#container_dentaku
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
}

img.dentaku {
    width: 5%;
    padding-right: 1%;
}
#dentaku_moji p {
    margin: 2px;
    line-height: 1.5;
}.simyure-ta {
    font-size: 100%;
}
.komoji {
    font-size: 80%;
    padding-bottom: 20px;
}
#dentaku_moji A {
    font-size: 80%;
}


.contact .contact_a2 {
    margin-top: 5%;
}
@media only screen and (max-width: 414px) {
.simyure-ta {
    font-size: 1rem;
}
.contact .contact_a2 {
    margin-top: 30%;
}
/ * original * /
# original-all {
    margin: 10px auto 0 auto;
    background-image: url (img/haikei.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 180%;
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: bold;
}
#original p {
    font-size: 100%;
    text-align: center;
}
# original-all .komoji {
    font-size: 100%;
    margin-bottom: 10px;
    text-align: center;
}
#original {
    background: rgba (255,255,255,0.7);
    border-radius: 0px;
    margin: 5% 0;
    padding: 3% 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;/* Gap between columns * /
}
#container_dentaku
{
    display: flex! important;/* Priority * /
}
img.dentaku {
    width: 10% ;! important;/* Priority * /
}
#dentaku_moji p {
    margin: 2px;
    line-height: 1.5;
}
.simyure-ta {
    font-size: 100%;
}
.komoji {
    font-size: 100%;
    padding-bottom: 20px;
}
#dentaku_moji A {
    font-size: 95%;
}
}

html5 css3

Answer # 1

I think that it is possible by rearranging using the order of flex, but there is no sense of forcing it together even though the HTML layout does not match the content. CSS is also complicated.

I think that images and text are related, so HTML should be described accordingly.

Current situation


    
    
    
    Text 1 ...
    Text 2 ...
    Text 3 ...

The layout has nothing to do with the image and text.

Modification example

If you do this,
In PC size, Flex displays containers side-by-side, and items vertically.
In smartphone size, containers are arranged vertically and items are arranged horizontally.
If it is set to be, it is OK.

The horizontal alignment isflex-direction: row;
The vertical alignment isflex-direction: column;

CSS example for the above HTML

. container {
  display: flex;
 justify-content: space-between;
}
.item {
  display: flex;
  flex-direction: column;
  width: 31%;
  border: solid 1px;
}
.item img {
  width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 414px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .item img {
    width: 27%;
 }
  .item p {
    width: 67%;
  }
}

Since the detailed hope of the layout is unknown, I made it suitable.
Operation check sample

Adjust the settings such as the margin and vertical position by referring to the following.

Japanese support! CSS Flexbox cheat sheet made and distributed | Web Creator Box

TutorialFor

css3 - i want to arrange in two rows with html css flexbox

Related articles