How to align text and chart using CSS-CodePudding

I'm trying to have my text in one line and then all the charts in a new line. I've tried using <!br> but that didn't work and I also tried using display:block in CSS. I've attached images below. The format only looks how I want it to look if there are two charts embedded but not with three.

how to fix this

I want it to look like this

I could really really use some help. I need it for uni. Thank you! :)

HTML

<container class="bcontainer">
    <p>This first chart tracks Covid-19 cases by UK region. My second chart looks at productivity in the UK. This chart on gun deaths in the US is pulled from the Rapid Charts example library.</p>

    <div class="chart" id="chart1">
        <script>
            var myChart1 = "chart1_covidUKRegions.json";
            vegaEmbed('#chart1', myChart1);
        </script>
    </div>

    <div class="chart" id="chart2">
        <script>
            var myChart2 = "chart2_ukProductivity.json";
            vegaEmbed('#chart2', myChart2);
        </script>
    </div>

    <div class="chart" id="chart3">
        <script>
            var myChart3 = "chart3_gundeathUS.json";
            vegaEmbed('#chart3', myChart3);
        </script>
    </div>
</container>

CSS

p{
    color:rgb(203, 221, 224);
    font-family: 'Roboto', sans-serif;
    line-height: 1; 
    text-align: justify;
    text-align-last: center;
    display: block;
    max-width: 960px;
}

.bcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 25px 25px;
  margin-top: 25px;
  border-style: solid;
  border-color: rgb(219, 188, 188);
  padding: 25px;
  border-radius: 35px;
  
}

/* Chart Format */
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.chart {
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    display: inline-block;

}

CodePudding user response：

Just put your all charts in another div.

<div>
  <div class="chart" id="chart1">
    <script>
        var myChart1 = "chart1_covidUKRegions.json";
        vegaEmbed('#chart1', myChart1);
    </script>
  </div>
  <div class="chart" id="chart2">
    <script>
        var myChart2 = "chart2_ukProductivity.json";
        vegaEmbed('#chart2', myChart2);
    </script>
  </div>
  <div class="chart" id="chart3">
    <script>
        var myChart3 = "chart3_gundeathUS.json";
        vegaEmbed('#chart3', myChart3);
    </script>
  </div>
</div>

CodePudding user response：

.bcontainer class have display: flex which will override the display on p tag. for your problem i suggest you edit the flex-flow property:

.bcontainer {
  flex-flow: column;
  align-items:center; // to center elements horizontally if you want
  ...
  ...
}

this will make elements take full line then you will have to wrap charts elements in chart-container and remove flex-direction: column; from .chart-container property (default value of flex-direction is row).

.chart-container {
 display: flex;
 flex-direction: column; **<-- remove this line**
 align-items: center;
 padding-top: 70px;
 padding-bottom: 70px;
}

The html inside container tag after p tag will look something like this :

  <div class="chart-container">
    <div class="chart" id="chart1">
      <script>
        var myChart1 = 'chart1_covidUKRegions.json';
        vegaEmbed('#chart1', myChart1);
      </script>
    </div>
    <div class="chart" id="chart2">
      <script>
        var myChart2 = 'chart2_ukProductivity.json';
        vegaEmbed('#chart2', myChart2);
      </script>
    </div>
    <div class="chart" id="chart3">
      <script>
        var myChart3 = 'chart3_gundeathUS.json';
        vegaEmbed('#chart3', myChart3);
      </script>
    </div>
  </div>